import ReactMarkdown, { type Components } from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import remarkGfm from 'remark-gfm';

import { MARKDOWN_SANITIZE_SCHEMA } from '../workspace/constants';

interface MarkdownRendererProps {
  content: string;
  components?: Components;
}

export function MarkdownRenderer({
  content,
  components,
}: MarkdownRendererProps) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw, [rehypeSanitize, MARKDOWN_SANITIZE_SCHEMA]]}
      components={components}
    >
      {content}
    </ReactMarkdown>
  );
}