"use client"

import {
    IconSettings,
    IconHelp,
    IconSearch
} from "@tabler/icons-react"
import {
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar"

// 图标映射
const iconMap = {
    settings: IconSettings,
    help: IconHelp,
    search: IconSearch,
} as const;

export function NavSecondaryClient({
    items,
}: {
    items: {
        title: string
        url: string
        iconName: string
    }[]
}) {
    return (
        <SidebarMenu>
            {items.map((item) => {
                const IconComponent = iconMap[item.iconName as keyof typeof iconMap];

                return (
                    <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton asChild>
                            <a href={item.url}>
                                {IconComponent && <IconComponent />}
                                <span>{item.title}</span>
                            </a>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                );
            })}
        </SidebarMenu>
    )
}