import parse, { domToReact, HTMLReactParserOptions } from 'html-react-parser';
import DOMPurify from 'dompurify';

export const renderHtmlSafe = (html: string) => {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: [
      'div', 'p', 'b', 'i', 'u', 'span',
      'blockquote', 'strong', 'em', 'br'
    ],
  });

  const options: HTMLReactParserOptions = {
    replace: (domNode: any) => {
      if (domNode.type === 'tag') {
        const allowed = [
          'div', 'p', 'b', 'i', 'u',
          'span', 'blockquote', 'strong', 'em', 'br'
        ];

        if (!allowed.includes(domNode.name)) {
          return <span>{domToReact(domNode.children)}</span>;
        }
      }
    },
  };

  return parse(clean, options);
};