"use client";

import { useLivePreview } from "@payloadcms/live-preview-react";
import { RichText } from "./RichText";

const PAYLOAD_URL = process.env.NEXT_PUBLIC_PAYLOAD_URL || "https://payload.mk360.de";

// Wraps just the RichText body of a legal page (/agb, /datenschutz,
// /impressum, /widerruf) for Payload Live Preview — those 4 pages' own
// headings/sidebars/TOC are hardcoded per page, not sourced from
// `page.title` at all, so `content` is the only field that actually
// benefits from real-time editing preview. Falls back to the
// server-fetched `initialContent` until a postMessage arrives, which only
// happens at all while this page is open inside the Payload admin's Live
// Preview iframe — ordinary visitors never mount this differently from a
// plain <RichText>.
export function LiveRichText({ initialContent, quoteLabel }: { initialContent: unknown; quoteLabel?: string }) {
  const { data } = useLivePreview<{ content: unknown }>({
    initialData: { content: initialContent },
    serverURL: PAYLOAD_URL,
    depth: 2,
  });

  return <RichText content={data.content} quoteLabel={quoteLabel} />;
}