'use client';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';

type Props = {
  content: string;
};

// 允许断点 div 通过 sanitize
const schema = {
  ...defaultSchema,
  attributes: {
    ...defaultSchema.attributes,
    div: [
      ...(defaultSchema.attributes?.div || []),
      ['className', 'data-breakpoint'],
    ],
  },
};

/** Markdown 渲染器（含 XSS 过滤 + GFM 支持） */
export function MarkdownRenderer({ content }: Props) {
  return (
    <div className="prose">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[[rehypeSanitize, schema]]}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}