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

export function NavMain({ items = [] }: { items: NavItem[] }) {
    const page = usePage<SharedData>();
    const { translations } = page.props;
    const navigationTranslations =
        translations && typeof translations.dashboard === 'object' && translations.dashboard !== null
            ? (translations.dashboard as Record<string, unknown>).navigation
            : null;
    const groupLabelValue =
        navigationTranslations && typeof navigationTranslations === 'object' && navigationTranslations !== null
            ? (navigationTranslations as Record<string, unknown>).group_label
            : null;
    const groupLabel = typeof groupLabelValue === 'string' ? groupLabelValue : 'Kundenbereich';

    return (
        <SidebarGroup className="px-2 py-0">
            <SidebarGroupLabel>{groupLabel}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton
                            asChild
                            isActive={page.url.startsWith(typeof item.href === 'string' ? item.href : item.href.url)}
                            tooltip={{ children: item.title }}
                        >
                            <Link href={item.href} prefetch>
                                {item.icon && <item.icon />}
                                <span>{item.title}</span>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                ))}
            </SidebarMenu>
        </SidebarGroup>
    );
}