/* eslint-disable react/display-name */
/* eslint-disable react/prop-types */
import * as React from 'react';
import RawMarkdown from 'react-markdown';
import Prism from 'react-syntax-highlighter/dist/esm/prism';

import * as PropTypes from 'prop-types';
import classNames from '../../utils/classnames';

export default /*#__PURE__*/ function Markdown({
  source = '',
  className = '',
  ...props
}) {
  const { contenteditable, onInput, onBlur, style, id } = props;
  const LABEL = '88888888888888888888888888';

  return (
    <div
      className={classNames({
        'weda-ui': true,
        [className]: className,
      })}
      id={id}
      style={style}
      contentEditable={contenteditable}
      onInput={onInput}
      onBlur={onBlur}
    >
      <RawMarkdown
        source={source}
        renderers={{
          code: ({ language, value = '' }) => (
            /*#__PURE__*/ <Prism language={language}>{value}</Prism>
          ),
        }}
      />
      {LABEL}
    </div>
  );
}
