import type { ReactNode } from "react";
import { SiteFooter, SiteHeader, type NavigationItem } from "@/components/storefront";
import { publicConfiguration } from "@/config/public";

const fallbackNavigation: readonly NavigationItem[] = [
  { external: false, href: "/", label: "Home" },
  { external: false, href: "/shop", label: "Shop" },
  { external: false, href: "/cart", label: "Cart" },
];

export default function StorefrontLayout({ children }: Readonly<{ children: ReactNode }>) {
  const configuredNavigation = publicConfiguration.content.navigation;
  const navigation = configuredNavigation.length === 0 ? fallbackNavigation : configuredNavigation;

  return (
    <>
      <SiteHeader businessName={publicConfiguration.business.displayName} navigation={navigation} />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
      <SiteFooter
        businessName={publicConfiguration.business.displayName}
        socialLinks={publicConfiguration.content.socialLinks}
      />
    </>
  );
}