'use client'

import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar
} from '@repo/ui/components/ui/sidebar'
import { useIsMobile } from '@repo/ui/hooks/use-mobile'

import { type LucideIcon } from 'lucide-react'
import { NavLink } from 'react-router'

type NavItem = {
  title: string
  url: string
  icon?: LucideIcon
}

export function NavMain({ navMain }: { navMain: NavItem[] }) {
  return (
    <>
      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            {navMain.map((props, idx) => (
              <SidebarMenuItemLink key={idx} {...props} />
            ))}
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </>
  )
}

function SidebarMenuItemLink({ title, url, icon: Icon }: NavItem) {
  const { toggleSidebar } = useSidebar()
  const isMobile = useIsMobile()

  const onToggle = () => (isMobile ? toggleSidebar() : null)

  return (
    <SidebarMenuItem key={title} onClick={onToggle}>
      <NavLink to={url}>
        {({ isActive }) => (
          <SidebarMenuButton
            asChild
            className="data-[active=true]:text-lime-500"
            isActive={isActive}
            tooltip={title}
          >
            <span>
              {Icon ? <Icon /> : null}
              <span>{title}</span>
            </span>
          </SidebarMenuButton>
        )}
      </NavLink>
    </SidebarMenuItem>
  )
}
