import sanitizeHtml from "sanitize-html";

const sanitizedConfig: sanitizeHtml.IOptions = {
  allowedTags: [
    ...sanitizeHtml.defaults.allowedTags,
    "img",
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "iframe",
    "figure",
    "figcaption",
    "video",
    "source",
    "span",
  ],
  allowedAttributes: {
    a: ["href", "name", "target", "rel"],
    img: ["src", "alt", "title", "width", "height", "loading"],
    iframe: ["src", "title", "width", "height", "allow", "allowfullscreen", "loading"],
    '*': ["class"],
  },
  transformTags: {
    a: sanitizeHtml.simpleTransform("a", { rel: "noopener noreferrer" }),
    img: sanitizeHtml.simpleTransform("img", { loading: "lazy" }),
  },
};

export function RichContent({ html }: { html: string }) {
  const clean = sanitizeHtml(html, sanitizedConfig);
  return <div className="content-html" dangerouslySetInnerHTML={{ __html: clean }} />;
}