import * as React from 'react';
import { clsx } from 'clsx';
import { generateHTML } from '@tiptap/html';
import Mention from '@tiptap/extension-mention';
import type { JSONContent } from '@tiptap/core';

import { buildExtensions } from './extensions.js';

export interface RichTextViewerProps {
  /** Tiptap JSON document to render read-only. */
  doc: JSONContent;
  className?: string;
}

/**
 * Read-only renderer. Serialises a Tiptap JSON doc to HTML using the same
 * extension schema as the editor (so output matches), with no editing surface
 * and no client runtime — safe to render on the server.
 */
export function RichTextViewer({ doc, className }: RichTextViewerProps) {
  const html = React.useMemo(() => generateHTML(doc, buildExtensions({ extra: [Mention] })), [doc]);
  return (
    <div
      className={clsx('bl-rich-text-content', className)}
      // Content is produced by Tiptap's own serializer from a trusted JSON doc.
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}
