'use client';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface Props {
  children: string;
  className?: string;
}

/**
 * Renders the analyzer's prose fields (summary, next_step, next_step_rationale,
 * post_resolution_analysis) as markdown. Stage 3's prompt forbids headers, but
 * we coerce any that slip through into bold paragraphs since the surrounding
 * Card already provides the section heading.
 */
export function AnalysisMarkdown({ children, className = '' }: Props) {
  return (
    <div
      className={`prose prose-sm dark:prose-invert max-w-none prose-p:leading-7 prose-li:leading-7 prose-strong:text-foreground prose-headings:text-foreground ${className}`}
    >
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          h1: ({ children }) => <p className="font-semibold">{children}</p>,
          h2: ({ children }) => <p className="font-semibold">{children}</p>,
          h3: ({ children }) => <p className="font-semibold">{children}</p>,
          h4: ({ children }) => <p className="font-semibold">{children}</p>,
          h5: ({ children }) => <p className="font-semibold">{children}</p>,
          h6: ({ children }) => <p className="font-semibold">{children}</p>,
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
}