import React from 'react';
import PropTypes from 'prop-types';
import isString from 'lodash/isString';
import { Converter } from 'showdown';

const converter = new Converter({
    tables: true,
    simplifiedAutoLink: true,
    openLinksInNewWindow: true,
});

const Markdown = ({ text, children, MdComponent, ...props }) => {
    let source = '';
    if (text && isString(text)) {
        source = text;
    } else if (children && isString(children)) {
        source = children;
    }
    return <MdComponent {...props} dangerouslySetInnerHTML={{ __html: converter.makeHtml(source) }} />;
};

Markdown.propTypes = {
    text: PropTypes.string,
    children: PropTypes.string,
    MdComponent: PropTypes.elementType,
};

Markdown.defaultProps = {
    MdComponent: 'div',
};

export default Markdown;
