"use client";

import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { mergeMarkdownComponents } from "@/components/markdown/mergeComponents";

type MarkdownBodyClientProps = {
  content: string;
  className?: string;
  components?: Components;
};

/**
 * 客户端 Markdown（发帖预览 / 评论）：GFM + 图箱 / 代码折叠复制。
 * 语法高亮在 MdCodeBlock 内按需用 Shiki 补齐。
 */
export default function MarkdownBodyClient({
  content,
  className = "prose-content",
  components,
}: MarkdownBodyClientProps) {
  return (
    <div className={className}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={mergeMarkdownComponents(components)}
      >
        {content || ""}
      </ReactMarkdown>
    </div>
  );
}