import React from "react"

import { type LucideIcon } from "lucide-react"

import {

  SidebarGroup,

  SidebarGroupContent,

  SidebarMenu,

  SidebarMenuBadge,

  SidebarMenuButton,

  SidebarMenuItem,

} from "@/components/ui/sidebar"

export function NavSecondary({

  items,

  ...props

}: {

  items: {

    title: string

    url: string

    icon: LucideIcon

    badge?: React.ReactNode

  }[]

} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {

  return (

    <SidebarGroup {...props}>

      <SidebarGroupContent>

        <SidebarMenu>

          {items.map((item) => (

            <SidebarMenuItem key={item.title}>

              <SidebarMenuButton asChild>

                <a href={item.url}>

                  <item.icon />

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

                </a>

              </SidebarMenuButton>

              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}

            </SidebarMenuItem>

          ))}

        </SidebarMenu>

      </SidebarGroupContent>

    </SidebarGroup>

  )

}