import type { ReactElement } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export function MarkdownRenderer({ children }: { children: string }): ReactElement {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        a: ({ href, children: linkChildren, node: _node, ...props }) => (
          <a {...props} href={href} rel="noreferrer" target="_blank">{linkChildren}</a>
        )
      }}
    >
      {children}
    </ReactMarkdown>
  );
}
