// Markdown renderer component using react-markdown
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

interface MarkdownRendererProps {
  content: string
  className?: string
  /** If true, renders in a compact single-line style for table cells */
  compact?: boolean
}

export default function MarkdownRenderer({
  content,
  className = '',
  compact = false,
}: MarkdownRendererProps) {
  if (!content) return null

  if (compact) {
    // For table cells, render a truncated plain text version
    // Strip markdown syntax for preview
    const plainText = content
      .replace(/[#*_~`>\[\]()!]/g, '')
      .replace(/\n+/g, ' ')
      .trim()
    return (
      <span className={`truncate ${className}`} title={plainText}>
        {plainText.length > 100 ? plainText.slice(0, 100) + '...' : plainText}
      </span>
    )
  }

  return (
    <div className={`prose prose-sm max-w-none ${className}`}>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
    </div>
  )
}