"use client"

import {
    IconDashboard,
    IconChartBar,
    IconUsers,
    IconCamera,
    IconFileDescription,
    IconFileAi,
    IconFileText,
    IconSettings,
    IconHelp,
    IconSearch,
    IconDatabase,
    IconReport,
    IconShield
} from "@tabler/icons-react"
import { usePathname } from "next/navigation"
import Link from "next/link"
import {
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar"

// 图标映射
const iconMap = {
    dashboard: IconDashboard,
    chartBar: IconChartBar,
    users: IconUsers,
    shield: IconShield,
    camera: IconCamera,
    fileDescription: IconFileDescription,
    fileAi: IconFileAi,
    fileText: IconFileText,
    settings: IconSettings,
    help: IconHelp,
    search: IconSearch,
    database: IconDatabase,
    report: IconReport,
} as const;

export function NavMainClient({
    items,
}: {
    items: {
        title: string
        url: string
        iconName: string
    }[]
}) {
    const pathname = usePathname()

    return (
        <SidebarMenu>
            {items.map((item) => {
                const IconComponent = iconMap[item.iconName as keyof typeof iconMap];

                return (
                    <SidebarMenuItem key={item.title}>
                        <Link href={item.url}>
                            <SidebarMenuButton tooltip={item.title} isActive={pathname === item.url}>
                                {IconComponent && <IconComponent />}
                                <span>{item.title}</span>
                            </SidebarMenuButton>
                        </Link>
                    </SidebarMenuItem>
                );
            })}
        </SidebarMenu>
    )
}