"use client";

import { useMemo } from "react";
import { Render } from "@reacteditor/core";
import "@reacteditor/core/dist/index.css";
import { createConfig } from "~/editor/config";
import { ShopifyProvider } from "~/editor/contexts/shopify-context";

const SHOPIFY_DOMAIN =
  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";

export default function RenderClient({
  data,
  route,
}: {
  data: { root: any; content: any[] };
  route: string;
}) {
  const config = useMemo(
    () =>
      createConfig({
        domain: SHOPIFY_DOMAIN,
        token: STOREFRONT_TOKEN || null,
      }),
    [],
  );

  return (
    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
      <Render config={config as any} data={data as any} metadata={{ route }} />
    </ShopifyProvider>
  );
}