// @design-system: layout/BottomNavIsland
'use client';

/**
 * BottomNavIsland — React island that renders the sticky BottomNav for public
 * pages using PublicAppShell. Mobile only (lg:hidden wrapper in PublicAppShell).
 *
 * Uses HydratedIsland for QueryClientProvider + LocaleProvider + ErrorBoundary.
 * useCustomerNavItems marks the active tab from `activePath`.
 *
 * Phase 4: isGuest read from useAuthHint() hook. SSR prop no longer required.
 */

import { HydratedIsland } from '@/components/HydratedIsland';
import { BottomNav, useCustomerNavItems } from '@/components/ui/layout/BottomNav';
import { useAuthHint } from '@/lib/hooks/useAuthHint';
import type { Locale } from '@/lib/i18n';

export interface BottomNavIslandProps {
  /** Current page path — used to mark the active tab. */
  activePath: string;
  locale: Locale;
}

function BottomNavInner({ activePath }: { activePath: string }) {
  const { loggedIn } = useAuthHint();
  const items = useCustomerNavItems(activePath, { isGuest: !loggedIn });
  return <BottomNav mode="customer" items={items} />;
}

export function BottomNavIsland({ activePath, locale }: BottomNavIslandProps) {
  return (
    <HydratedIsland locale={locale}>
      <BottomNavInner activePath={activePath} />
    </HydratedIsland>
  );
}