'use client';

import { useCallback, useMemo } from 'react';
import { Editor, outlinePlugin, type Data } from '@reacteditor/core';
import createTailwindCdnPlugin from '@reacteditor/plugin-tailwind-cdn';
import { appConfig } from '@/editor.config';
import { publishPage } from '@/lib/publish-page';
import globals from '@/app.globals.json';

const plugins = [outlinePlugin(), createTailwindCdnPlugin()];

export default function PageEditor({ pagePath, page }: { pagePath: string; page: Record<string, unknown> }) {
  const data = useMemo(() => ({ ...page, globals }) as unknown as Data, [page]);
  const handlePublish = useCallback(async (published: Data) => {
    const result = await publishPage(pagePath, published);
    if (result.error) throw new Error(result.error);
  }, [pagePath]);

  return <Editor theme="light" config={appConfig as never} data={data} plugins={plugins} onPublish={handlePublish} />;
}