"use client";

import React, { useMemo } from "react";
import type { JSONContent } from "@tiptap/react";
import { richTextToSafeHtml } from "@/lib/richtext";

export default function RichTextClient({
  doc,
  className,
}: {
  doc: JSONContent;
  className?: string;
}) {
  const html = useMemo(() => richTextToSafeHtml(doc), [doc]);

  return (
    <div
      className={className}
      // HTML is sanitized in `richTextToSafeHtml`
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}