import 'highlight.js/styles/github.css';

import React from 'react';

import mdParser from '../../utils/markdown';
import { MarkdownStyle } from '../../utils/styles';

type MarkdownPropType = {
  content: string;
};

const defaultRender = mdParser.renderer.rules.image;
const Markdown: React.FC<MarkdownPropType> = ({ content }) => {
  const renderHTML = (text: string) => {
    mdParser.renderer.rules.image = (tokens, idx, options, env, s) => {
      return defaultRender ? defaultRender(tokens, idx, options, env, s) : '';
    };
    return mdParser.render(text);
  };

  return (
    <div>
      <MarkdownStyle id="markdownStyle">
        <span dangerouslySetInnerHTML={{ __html: renderHTML(content) }} />
      </MarkdownStyle>
    </div>
  );
};

export default Markdown;