'use client';

/**
 * StaticPageIsland — renders a page-organizer-driven static page.
 *
 * Receives a pre-hydrated LoadedPage (mobile + desktop module arrays) from the
 * Astro server frontmatter and passes each half to PageRenderer.
 * The mobile branch renders on small viewports (lg:hidden); the desktop branch
 * renders on large viewports (hidden lg:block).
 */

import { GlobalCartDrawer } from '@/components/ui/domain/cart/GlobalCartDrawer';
import { HydratedIsland } from '@/components/HydratedIsland';
import { CheckoutModal } from '@/features/checkout-modal/CheckoutModal';
import { PageRenderer } from '@/server/page-layout/renderer/PageRenderer';
import type { LoadedPage } from '@/server/page-layout/loader';
import type { Locale } from '@/lib/i18n';

interface StaticPageIslandProps {
  page: LoadedPage;
  locale: Locale;
  forceDevice?: 'mobile' | 'desktop' | null;
}

function Inner({ page, forceDevice = null }: Pick<StaticPageIslandProps, 'page' | 'forceDevice'>) {
  return (
    <>
      {forceDevice === 'mobile' ? (
        <PageRenderer modules={page.mobile} />
      ) : forceDevice === 'desktop' ? (
        <PageRenderer modules={page.desktop} />
      ) : (
        <>
          <div className="lg:hidden">
            <PageRenderer modules={page.mobile} />
          </div>
          <div className="hidden lg:block">
            <PageRenderer modules={page.desktop} />
          </div>
        </>
      )}
      {/* Page-level overlays — must live in same React root as buy buttons */}
      <GlobalCartDrawer />
      <CheckoutModal />
    </>
  );
}

export function StaticPageIsland({ page, locale, forceDevice }: StaticPageIslandProps) {
  return (
    <HydratedIsland locale={locale}>
      <Inner page={page} forceDevice={forceDevice} />
    </HydratedIsland>
  );
}