import {
  AppLayout,
  AppTopBar,
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarHeader,
} from "@raredays/components";
import type { NavItem } from "@raredays/site-config";
import type { ReactNode } from "react";
import siteSpec from "../../site.spec";

export default function AppGroupLayout({ children }: { children: ReactNode }) {
  const primaryNav = (siteSpec.navigation?.primary ?? []) as readonly NavItem[];

  return (
    <AppLayout
      sidebar={
        <Sidebar>
          <SidebarHeader>
            <span className="px-2 text-lg font-bold">RareDays</span>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>App</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {primaryNav.map((item) => (
                    <SidebarMenuItem key={item.href}>
                      <SidebarMenuButton asChild>
                        <a href={item.href}>
                          <span>{item.label}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
      }
      topbar={<AppTopBar />}
    >
      {children}
    </AppLayout>
  );
}