'use client';

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

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}>
                            <SidebarGroupLabel>{item.label}</SidebarGroupLabel>
                            <SidebarMenu>
                                {item.items.map((child) => (
                                    <SidebarMenuItem key={child.name}>
                                        <SidebarMenuButton
                                            asChild
                                            isActive={url === child.url}
                                            tooltip={child.name}
                                        >
                                            <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}>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton
                                    asChild
                                    isActive={url === item.url}
                                    tooltip={item.name}
                                >
                                    <Link href={item.url}>
                                        <item.icon className="h-4 w-4" />
                                        <span>{item.name}</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroup>
                );
            })}
        </>
    );
}