"use client";

import React, { useMemo } from "react";
import DOMPurify from "dompurify";
import { cn } from "@/utils/helpers";

interface Props {
  className?: string;
  desc: string;
}

const ParsedDesc = ({ className, desc }: Props) => {

  const sanitizedHtml = useMemo(() => {
    if (typeof window !== "undefined") {
      return DOMPurify.sanitize(desc || "", { USE_PROFILES: { html: true } });
    }
    return desc || "";
  }, [desc]);

  return (
    <div
      className={cn(className, "font-normal text-secondrydark")}
      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
    />
  );
};

export default ParsedDesc;