'use client';

import type { ReactNode } from 'react';
import { AppShell } from '@/components/ui/layout/AppShell';
import { BottomNav, useCustomerNavItems } from '@/components/ui/layout/BottomNav';
import { SiteNav } from '@/components/ui/layout/SiteNav';
import { GlobalCartDrawer } from '@/components/ui/domain/cart/GlobalCartDrawer';
import type { Locale } from '@/lib/i18n';

export interface SystemPageShellProps {
  initialLocale: Locale;
  isGuest: boolean;
  isAdmin?: boolean;
  isVendor?: boolean;
  children: ReactNode;
}

export function SystemPageShell({
  initialLocale,
  isGuest,
  isAdmin,
  isVendor,
  children,
}: SystemPageShellProps) {
  const navItems = useCustomerNavItems('/', { isGuest });

  return (
    <AppShell
      mode="customer"
      initialLocale={initialLocale}
      desktopTopBar={
        <SiteNav
          variant="desktop"
          currentPath="/"
          isGuest={isGuest}
          isAdmin={isAdmin}
          isVendor={isVendor}
        />
      }
      topBar={
        <SiteNav
          variant="mobile"
          currentPath="/"
          isGuest={isGuest}
          isAdmin={isAdmin}
          isVendor={isVendor}
        />
      }
      bottomNav={<BottomNav mode="customer" items={navItems} />}
      pageOverlays={<GlobalCartDrawer />}
    >
      <main id="main">{children}</main>
    </AppShell>
  );
}