interface PolicyBodyProps {
  /** Sanitized HTML, prepared by `getPolicies` */
  content?: string | null;
  emptyText: string;
}

const BODY_CLASSES = [
  "text-[16px] md:text-[20px] font-light leading-relaxed",
  "[&>:first-child]:mt-0",
  "[&_p]:my-3",
  "[&_h2]:mt-8 [&_h2]:mb-3 [&_h2]:text-[18px] md:[&_h2]:text-[24px] [&_h2]:font-bold",
  "[&_h3]:mt-6 [&_h3]:mb-2 [&_h3]:text-[17px] md:[&_h3]:text-[21px] [&_h3]:font-bold",
  "[&_h4]:mt-4 [&_h4]:mb-2 [&_h4]:font-bold",
  "[&_ul]:my-3 [&_ul]:list-disc [&_ul]:ps-6",
  "[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:ps-6",
  "[&_li]:my-1",
  "[&_strong]:font-bold [&_b]:font-bold",
  "[&_a]:text-secondary-dark [&_a]:underline [&_a:hover]:text-secondary-main",
].join(" ");

export default function PolicyBody({ content, emptyText }: PolicyBodyProps) {
  if (!content) {
    return <p className="text-[16px] md:text-[20px] font-light">{emptyText}</p>;
  }

  return (
    <div
      className={BODY_CLASSES}
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}