import * as React from "react";
import { Box } from "@mui/material";

// import "github-markdown-css/github-markdown-light.css";
// import "@/styles/github-markdown-light.css";
import "@code-hike/mdx/dist/index.css"

export interface MarkdownContainerProps {
  children: React.ReactNode;
}

export default function MarkdownContainer(props: MarkdownContainerProps) {
  const { children } = props;

  return (
    <Box
      component="div"
      className="markdown-body"
      id="markdown-body"
      sx={{
        // override github-markdown-css styles
        "&.markdown-body": {
          "& a.MuiButton-contained": {
            color: "#fff",
            backgroundColor: "primary.main",

            "&:hover": {
              textDecoration: "none",
            },
          },

          "& h1": {
            borderBottom: "none",
          },

          "& .homecard-list-item": {
            color: "#565656",

            "& a": {
              color: "inherit",
              textDecoration: "underline",
            },
          },

          "& .custom-alert": {
            "& p": {
              margin: "unset",
            },
          },

          "& a.text-primary": {
            color: "text.primary",
            textDecoration: "underline",
          },

          "& a.headings": {
            "&:hover": {
              textDecoration: "none",
            },
            color: "inherit",
          },

          "& blockquote": {
            fontSize: "14px",
          },

          // "& img": {
          //   width: {
          //     xs: "100%",
          //     sm: "100%",
          //     md: "75%",
          //     lg: "60%",
          //   },
          // },

          "& .code-block": {
            "& pre": {
              margin: "unset",
            },
          },
        },
      }}
    >
      {children}
    </Box>
  );
}