import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import './MarkdownRenderer.css';

/**
 * 统一的Markdown渲染组件
 *
 * @param {string} content - Markdown内容
 * @param {string} className - 自定义CSS类名（可选）
 * @param {string} emptyMessage - 内容为空时显示的消息（可选）
 */
const MarkdownRenderer = ({ content, className = '', emptyMessage = '暂无内容' }) => {
  if (!content || content.trim() === '') {
    return <div className="markdown-empty">{emptyMessage}</div>;
  }

  return (
    <div className={`markdown-renderer ${className}`}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw, rehypeSanitize]}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
};

export default MarkdownRenderer;