import type { CanvasComponent } from '../../types/canvas';
import { RendererWrapper, type ComponentRenderContext } from './RendererWrapper';

interface Props {
  component: CanvasComponent;
  ctx: ComponentRenderContext;
}

export function TextCanvasRenderer({ component, ctx }: Props) {
  const params = component.visualizationParameters as {
    content?: string;
  };

  const content = String(params.content ?? '').trim();
  const paragraphs = content
    .split(/\n{2,}/)
    .map((block) => block.trim())
    .filter(Boolean);

  return (
    <RendererWrapper component={component} ctx={ctx} minHeight={180}>
      <div className="flex h-full flex-col gap-3 text-sm leading-7 text-zinc-200">
        {paragraphs.length ? (
          paragraphs.map((paragraph, index) => (
            <p key={`${component.componentId}-${index}`} className="whitespace-pre-wrap text-zinc-300">
              {paragraph}
            </p>
          ))
        ) : (
          <p className="text-zinc-500">No planning notes were generated for this prompt.</p>
        )}
      </div>
    </RendererWrapper>
  );
}
