'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

interface NavItem {
  title: string
  href: string
}

const navItems: NavItem[] = [
  { title: 'Home', href: '/' },
  { title: 'Products', href: '/products' },
  { title: 'About', href: '/about' },
  { title: 'Manifesto', href: '/manifesto' },
]

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

  return (
    <nav className="flex space-x-6">
      {navItems.map((item) => {
        const isActive = pathname === item.href
        return (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              'text-sm font-medium transition-colors hover:text-phoenix-fire',
              isActive ? 'text-phoenix-fire' : 'text-gray-400'
            )}
          >
            {item.title}
          </Link>
        )
      })}
    </nav>
  )
}

