import { NavLink } from 'react-router-dom'

import { appNavItems } from '@/config/navigation'
import { cn } from '@/lib/utils'

export const SidebarNav = () => {
  return (
    <nav className="flex flex-col gap-1">
      {appNavItems.map(({ path, label, icon: Icon }) => (
        <NavLink
          key={path}
          to={path}
          className={({ isActive }) =>
            cn(
              'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
              isActive && 'bg-primary/10 text-primary',
            )
          }
        >
          <Icon className="h-4 w-4" />
          {label}
        </NavLink>
      ))}
    </nav>
  )
}