import ReactMarkdown from 'react-markdown'
import { cn } from '@/lib/utils'

interface MarkdownContentProps {
  content: string
  className?: string
}

/**
 * Renders markdown content with proper styling.
 * Supports: bold, italic, lists, code blocks, headers, etc.
 */
export function MarkdownContent({ content, className }: MarkdownContentProps) {
  return (
    <div className={cn('prose prose-sm prose-invert max-w-none', className)}>
      <ReactMarkdown
        components={{
        // Style paragraphs
        p: ({ children }) => (
          <p className="mb-3 last:mb-0">{children}</p>
        ),
        // Style bold text
        strong: ({ children }) => (
          <strong className="font-semibold text-foreground">{children}</strong>
        ),
        // Style ordered lists
        ol: ({ children }) => (
          <ol className="mb-3 ml-4 list-decimal space-y-1 last:mb-0">{children}</ol>
        ),
        // Style unordered lists
        ul: ({ children }) => (
          <ul className="mb-3 ml-4 list-disc space-y-1 last:mb-0">{children}</ul>
        ),
        // Style list items
        li: ({ children }) => (
          <li className="text-muted-foreground">{children}</li>
        ),
        // Style inline code
        code: ({ className, children, ...props }) => {
          // Check if it's a code block (has language class) or inline code
          const isBlock = className?.includes('language-')
          if (isBlock) {
            return (
              <code
                className={cn(
                  'block rounded bg-code p-3 font-mono text-sm text-foreground overflow-x-auto',
                  className
                )}
                {...props}
              >
                {children}
              </code>
            )
          }
          return (
            <code
              className="rounded bg-white/[0.12] border border-white/[0.06] px-1.5 py-0.5 font-mono text-sm text-foreground"
              {...props}
            >
              {children}
            </code>
          )
        },
        // Style code blocks (pre)
        pre: ({ children }) => (
          <pre className="mb-3 overflow-x-auto rounded bg-code p-0 last:mb-0">
            {children}
          </pre>
        ),
        // Style headers
        h1: ({ children }) => (
          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
        ),
        h2: ({ children }) => (
          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
        ),
        h3: ({ children }) => (
          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
        ),
        // Style horizontal rules
        hr: () => <hr className="my-4 border-border" />,
        // Style blockquotes
        blockquote: ({ children }) => (
          <blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
            {children}
          </blockquote>
        ),
      }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}