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

marked.use({ gfm: true, breaks: true })

/**
 * AI 生成的 Markdown 渲染器。
 *
 * 模型输出的是 Markdown（总结、评审结论、release 正文），必须按 Markdown
 * 渲染而不是当纯文本显示。模型输出属于不可信内容，因此渲染结果一律经
 * DOMPurify 清洗：脚本、事件属性与 `javascript:` 链接都会被剥离。
 */
export function Markdown({
  children,
  className = '',
  compact = false,
}: {
  children: string
  className?: string
  /** 行内发现等小字号场景。 */
  compact?: boolean
}) {
  const html = useMemo(
    () => DOMPurify.sanitize(marked.parse(children, { async: false })),
    [children],
  )
  return (
    <div
      className={`gitdata-markdown ${compact ? 'gitdata-markdown-compact' : ''} ${className}`}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  )
}