import ReactMarkdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import remarkGfm from "remark-gfm";
import { Prose } from "../Prose";

export const Markdown = ({ markdownContent, ...props }) => {
  return (
    <>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/github-dark-dimmed.min.css"
      />
      <Prose as="div" {...props}>
        <ReactMarkdown
          remarkPlugins={[remarkGfm]} // Optional
          rehypePlugins={[rehypeHighlight]} // Optional
        >
          {markdownContent}
        </ReactMarkdown>
      </Prose>
    </>
  );
};