import { useTheme } from '@mui/material';
import MarkdownPreview from '@uiw/react-markdown-preview';
import PropTypes from 'prop-types';
import rehypeExternalLinks from 'rehype-external-links';
import { EmptyIcon } from '@arcblock/icons';
import DOMPurify from 'dompurify';
import StopBox from './stop-box';
import { jsx as _jsx } from "react/jsx-runtime";
function IntroductionPreview({
  text
}) {
  const {
    palette
  } = useTheme();
  if (!text) {
    return /*#__PURE__*/_jsx(StopBox, {
      Icon: EmptyIcon
    });
  }
  return /*#__PURE__*/_jsx(MarkdownPreview, {
    style: {
      backgroundColor: palette.background.default,
      color: palette.text.primary
    },
    wrapperElement: {
      'data-color-mode': 'light'
    },
    source: DOMPurify.sanitize(text),
    rehypePlugins: [[rehypeExternalLinks, {
      target: '_blank'
    }]]
  });
}
IntroductionPreview.propTypes = {
  text: PropTypes.string.isRequired
};
export default IntroductionPreview;