"use client"

import { type LucideIcon } from "lucide-react"

import Link from "next/link"

import { usePathname } from "next/navigation"

import {

SidebarGroup,

SidebarGroupContent,

SidebarGroupLabel,

SidebarMenu,

SidebarMenuButton,

SidebarMenuItem,

} from "@/components/ui/sidebar"

export function NavMain({

items,

}: {

items: {

title: string

url: string

icon?: LucideIcon

isActive?: boolean

}[]

}) {

const pathname = usePathname()

return (

<SidebarGroup>

<SidebarGroupLabel>Content Ops</SidebarGroupLabel>

<SidebarGroupContent>

<SidebarMenu>

{items.map((item) => (

<SidebarMenuItem key={item.title}>

<SidebarMenuButton

asChild

isActive={pathname === item.url}

>

<Link href={item.url}>

{item.icon && <item.icon />}

<span>{item.title}</span>

</Link>

</SidebarMenuButton>

</SidebarMenuItem>

))}

</SidebarMenu>

</SidebarGroupContent>

</SidebarGroup>

)

}