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

interface MarkdownProps {
  children: string;
  className?: string;
  inline?: boolean;
}

const REMARK_PLUGINS = [remarkGfm];

export function Markdown(
  { children, className, inline = false }: MarkdownProps,
) {
  return (
    <div
      className={`md${className ? ` ${className}` : ""}${
        inline ? " md--inline" : ""
      }`}
    >
      <ReactMarkdown
        remarkPlugins={REMARK_PLUGINS}
        components={{
          a: ({ href, children }) => (
            <a href={href} target="_blank" rel="noopener noreferrer">
              {children}
            </a>
          ),
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
}