"use client"

import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
    SidebarGroup,
    SidebarGroupContent,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar"
import Link from "next/link"
import { usePathname } from 'next/navigation'

export function NavMain({
    items,
}: {
    items: {
        title: string
        url: string
        icon?: Icon
    }[]
}) {
    const pathname = usePathname()
    const linkRenderActive = (item: { title: string; url: string; icon?: Icon }) =>
        <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: { title: string; url: string; icon?: Icon }) =>
        <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?.includes(item.url) ? linkRenderDisabled(item) : linkRenderActive(item))}
                </SidebarMenu>
            </SidebarGroupContent>
        </SidebarGroup>
    )
}