'use client';

import { Render, type Data } from '@puckeditor/core';
import { puckConfig } from '@/lib/puck/config';

interface PuckLibraryRendererProps {
  type: string;
  props: Record<string, any>;
}

/**
 * Renders a single library component from the Puck config.
 * Used on the live homepage for non-site components added via the editor.
 */
export function PuckLibraryRenderer({ type, props }: PuckLibraryRendererProps) {
  const component = puckConfig.components[type];
  if (!component) return null;

  // Build minimal puck data with just this one component
  const data: Data = {
    content: [{ type, props: { ...props, id: props.id || `lib-${type}` } }],
    root: { props: {} },
    zones: {},
  };

  return <Render config={puckConfig} data={data} />;
}
