import styles from './text.module.css'
import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
/* Use `…/dist/cjs/…` if you’re not in ESM! */
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'

export default function Text ({ children }) {
  return (
    <div className={styles.text}>
      <ReactMarkdown
        components={{
          h1: 'h6',
          h2: 'h6',
          h3: 'h6',
          h4: 'h6',
          h5: 'h6',
          h6: 'h6',
          table: ({ node, ...props }) =>
            <div className='table-responsive'>
              <table className='table table-bordered table-sm' {...props} />
            </div>,
          code ({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline
              ? (
                <SyntaxHighlighter showLineNumbers style={atomDark} language={match && match[1]} PreTag='div' {...props}>
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
                )
              : (
                <code className={className} style={atomDark} {...props}>
                  {children}
                </code>
                )
          }
        }}
        remarkPlugins={[gfm]}
      >
        {children}
      </ReactMarkdown>
    </div>
  )
}