import React from "react";

/* -------------------------------------------------------------------------- */
/*                                  MarkDown                                  */
/* -------------------------------------------------------------------------- */
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Typography from "./typography/Typography";
import Heading from "./typography/Heading";
import Link from "./Link";

/* -------------------------------------------------------------------------- */
/*                                    Code                                    */
/* -------------------------------------------------------------------------- */
import vsc from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";
import docco from "react-syntax-highlighter/dist/esm/styles/prism";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

export type Props = {
  markdown: string;
};

const Markdown = ({ markdown }: Props) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      children={markdown}
      components={{
        h1: Heading,
        h2: Typography,
        a: (props) => {
          return (
            <Link
              href={props.href}
              className="text-sky-600 font-bold text-base"
              {...props}
            >
              {props.children}
            </Link>
          );
        },

        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || "");
          return !inline && match ? (
            <SyntaxHighlighter
              children={String(children).replace(/\n$/, "")}
              style={docco}
              language={match[1]}
              PreTag="div"
              {...props}
            />
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    />
  );
};

export default Markdown;