import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import { ChatCodeBlock } from "./ChatCodeBlock";
import { cn } from "../lib/utils";

interface ChatMarkdownMessageProps {
  content: string;
  className?: string;
}

export function ChatMarkdownMessage({ content, className }: ChatMarkdownMessageProps) {
  return (
    <div className={cn("paperclip-markdown", className)}>
      <Markdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
        components={{
          pre: ChatCodeBlock,
        }}
      >
        {content}
      </Markdown>
    </div>
  );
}