import { useEffect, useMemo } from "react";
import { useEditor, EditorContent } from "@tiptap/react";

import { buildExtensions } from "./extensions.js";
import { parseNoteContent } from "./content";
import "./editor.css";

/**
 * Read-only render of a stored note body.
 *
 * Uses the same extension set as the real editor, so a past version is shown
 * with the formatting it actually had — including tables and note links —
 * rather than a stripped-down approximation.
 */
export function VersionPreview({ content, dark }) {
  const extensions = useMemo(() => buildExtensions(), []);

  const editor = useEditor(
    {
      extensions,
      editable: false,
      content: parseNoteContent(content, extensions),
    },
    []
  );

  useEffect(() => {
    if (!editor || editor.isDestroyed) return;
    editor.commands.setContent(parseNoteContent(content, extensions), false);
  }, [editor, content, extensions]);

  return (
    <div className="note-editor" data-theme={dark ? "dark" : "light"}>
      <EditorContent editor={editor} />
    </div>
  );
}

export default VersionPreview;