'use client'

import { cn } from '@/utils/cn'
import { Folder, GitBranch, Home, Info, Rss, Tags } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ExternalLink } from '../common/ExternalLink'

type NavItem = {
  href: string
  label: string
  icon: React.ReactNode
  isExternal?: boolean
}

const navItems: NavItem[] = [
  { href: '/', label: 'Home', icon: <Home className="w-4 h-4" /> },
  { href: '/categories', label: 'Categories', icon: <Folder className="w-4 h-4" /> },
  { href: '/about', label: 'About', icon: <Info className="w-4 h-4" /> },
  { href: '/tags', label: 'Tags', icon: <Tags className="w-4 h-4" /> },
  {
    href: '/feed.xml',
    label: 'RSS Feed',
    icon: <Rss className="w-4 h-4" />,
    isExternal: true,
  },
  {
    href: 'https://git.hangerthem.com/hangerthem/blog.hangerthem.com',
    label: 'Source Code',
    icon: <GitBranch className="w-4 h-4" />,
    isExternal: true,
  },
]

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>
  ))
}