'use client'

import { cn } from '@/utils/cn'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ExternalLink } from '../ui/ExternalLink'
import { navItems } from './navItems'

export function NavLinks() {
  const pathname = usePathname()

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === href
    }
    return pathname?.startsWith(href)
  }

  return navItems.map((item) => (
    <li
      key={item.href}
      className={cn(
        'transition-colors rounded-md',
        isActive(item.href) ? 'text-fg bg-fg/25' : 'text-fg-dim hover:text-fg hover:bg-fg/10',
      )}
    >
      {item.isExternal ? (
        <ExternalLink
          href={item.href}
          className="flex items-center gap-2 px-2 py-1 hover:no-underline focus:no-underline"
        >
          {item.icon}
          {item.label}
        </ExternalLink>
      ) : (
        <Link href={item.href} className="flex items-center gap-2 px-2 py-1">
          {item.icon}
          {item.label}
        </Link>
      )}
    </li>
  ))
}