"use client";

import DOMPurify from "isomorphic-dompurify";

interface BeritaDetailContentSectionProps {
  content: string;
}

const BeritaDetailContentSection = ({
  content,
}: BeritaDetailContentSectionProps) => {
  // Sanitize HTML content
  const sanitizedContent = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: [
      "p",
      "br",
      "strong",
      "b",
      "em",
      "i",
      "u",
      "h2",
      "h3",
      "h4",
      "ul",
      "ol",
      "li",
      "blockquote",
      "a",
      "img",
      "div",
      "span",
      "sup",
    ],
    ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "style", "target"],
  });

  return (
    <section className="bg-white px-6 py-6">
      <div className="max-w-7xl mx-auto">
        <div
          className="article-content max-w-[1300px] mx-auto"
          dangerouslySetInnerHTML={{ __html: sanitizedContent }}
        />
      </div>
    </section>
  );
};

export default BeritaDetailContentSection;