import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export default function MarkdownRenderer({ content }: { content: string }) {
  return (
    <div className="prose prose-zinc dark:prose-invert max-w-none prose-li:my-2 prose-ul:space-y-1 prose-a:text-blue-500 prose-a:no-underline hover:prose-a:underline prose-p:text-zinc-600 dark:prose-p:text-zinc-400 [&_input[type=checkbox]]:mr-2 [&_input[type=checkbox]]:accent-blue-500 [&_input[type=checkbox]]:w-4 [&_input[type=checkbox]]:h-4 [&_input[type=checkbox]]:cursor-default">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>
        {content}
      </ReactMarkdown>
    </div>
  );
}
