"use client"

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem
} from "@/components/ui/sidebar";
import { Link, usePage } from "@inertiajs/react";

export type NavItem = {
  name: string
  url: string
  icon: React.ComponentType<{ className?: string }>
}

export type NavGroup = {
  label: string
  items: NavItem[]
}

export function NavMain({
  items,
}: {
  items: (NavGroup | NavItem)[]
}) {
  const { url } = usePage()

  return (
    <>
      {items.map((item) => {
        if ("label" in item) {
          return (
            <SidebarGroup key={item.label} className="group-data-[collapsible=icon]:hidden">
              <SidebarGroupLabel>{item.label}</SidebarGroupLabel>
              <SidebarMenu>
                {item.items.map((child) => (
                  <SidebarMenuItem key={child.name}>
                    <SidebarMenuButton asChild isActive={url === child.url}>
                      <Link href={child.url}>
                        <child.icon className="h-4 w-4" />
                        <span>{child.name}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroup>
          )
        }

        return (
          <SidebarGroup key={item.name} className="group-data-[collapsible=icon]:hidden">
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive={url === item.url}>
                  <a href={item.url}>
                    <item.icon className="h-4 w-4" />
                    <span>{item.name}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroup>
        )
      })}
    </>
  )
}