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

export default function Markdown(props: { children: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        table: ({ node, ...rest }) => (
          <div style={{ overflowX: 'auto' }}>
            <table {...rest} />
          </div>
        )
      }}
    >
      {props.children}
    </ReactMarkdown>
  );
}

