import { Box } from "@mui/material";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

export const ReactMarkdownComponent = ({ value }: { value: string }) => {
  return (
    <Box
      className="prose prose-sm prose-invert w-full"
      sx={{
        "& img": {
          maxWidth: "100%",
          height: "auto",
          borderRadius: 1,
        },
        "& h1, & h2, & h3, & h4, & h5, & h6": {
          color: "white",
          mt: 2,
          mb: 1,
        },
        "& p": {
          mb: 2,
          color: "white",
        },
        "& a": {
          color: "white",
          textDecoration: "none",
          "&:hover": {
            textDecoration: "underline",
          },
        },
        "& blockquote": {
          borderLeft: "4px solid",
          borderColor: "primary.main",
          pl: 2,
          my: 2,
          color: "text.secondary",
        },
        "& code": {
          bgcolor: (theme) =>
            theme.palette.mode === "dark" ? "grey.900" : "grey.100",
          p: 0.5,
          borderRadius: 0.5,
          color: "primary.main",
        },
      }}
    >
      <ReactMarkdown rehypePlugins={[rehypeRaw]}>{value}</ReactMarkdown>
    </Box>
  );
};