"use client"
import Link from "next/link"
import { type Icon } from "@tabler/icons-react"
import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
import { usePathname } from 'next/navigation'

interface NavMainProps {
    title: string
    url: string
    icon?: Icon
}

export function NavMain({ items }: { items: NavMainProps[] }) {
    const pathname = usePathname()?.split("/")[1]
    const linkRenderActive = (item: NavMainProps) =>
        <Link key={`${item.title}-${item.url}`} href={item.url}><SidebarMenuItem>
            <SidebarMenuButton tooltip={item.title}>{item.icon && <item.icon />}<span>{item.title}</span></SidebarMenuButton>
        </SidebarMenuItem></Link>
    const linkRenderDisabled = (item: NavMainProps) =>
        <SidebarMenuItem key={`${item.title}-${item.url}`} className="opacity-50 bg-gray-300 border-gray-300 border-2 rounded-2xl">
            <SidebarMenuButton disabled tooltip={item.title}>{item.icon && <item.icon />}<span>{item.title}</span></SidebarMenuButton>
        </SidebarMenuItem>
    return (
        <SidebarGroup>
            <SidebarGroupContent className="flex flex-col gap-2">
                <SidebarMenu>
                    {items.map((item) => pathname?.toLocaleLowerCase() === item.url?.split("/")[1].toLocaleLowerCase() ? linkRenderDisabled(item) : linkRenderActive(item))}
                </SidebarMenu>
            </SidebarGroupContent>
        </SidebarGroup>
    )
}