import { useMemo } from 'react'
import { marked } from 'marked'

interface PreviewProps {
  content: string
}

export function Preview({ content }: PreviewProps) {
  const html = useMemo(() => {
    if (!content) {
      return '<p class="text-gray-400 dark:text-gray-600 italic">Start typing to see preview...</p>'
    }
    return marked.parse(content, { async: false }) as string
  }, [content])

  return (
    <div className="h-full bg-white dark:bg-gray-900 overflow-auto">
      <div
        className="preview-content p-6 prose dark:prose-invert max-w-none"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </div>
  )
}
