'use client'

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

type NavItem = {
  href: string
  label: string
  icon: React.ReactNode
  target?: string
  rel?: string
}

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" />,
    target: '_blank',
    rel: 'noopener noreferrer',
  },
]

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',
      )}
    >
      <Link
        href={item.href}
        className="flex items-center gap-2 px-2 py-1"
        target={item.target}
        rel={item.rel}
      >
        {item.icon}
        {item.label}
      </Link>
    </li>
  ))
}