import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw'
import './MarkdownRender.scss'

interface MarkdownRenderProps {
  children?: string
}

const MarkdownRender = function MarkdownRender({ children }: MarkdownRenderProps) {
  if (!children) {
    return null
  }

  return (
    <div className="markdown-render">
      <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw, rehypeHighlight]}>
        {children}
      </Markdown>
    </div>
  )
}

export default MarkdownRender
