'use client'

import { usePathname } from 'next/navigation'

const LINKS = [
  { href: '/', label: 'Home' },
  { href: '/pos', label: 'POS' },
  { href: '/bar', label: 'Bar' },
  { href: '/kitchen', label: 'Kitchen' },
  { href: '/staff', label: 'Staff' },
  { href: '/admin', label: 'Admin' },
]

export default function DemoNav() {
  const pathname = usePathname()

  return (
    <div className="bg-zinc-950 border-b border-zinc-800 px-4 py-2 flex items-center gap-1 overflow-x-auto">
      <span className="text-xs text-zinc-500 mr-2 whitespace-nowrap">DEMO NAV:</span>
      {LINKS.map((l) => {
        const active = pathname === l.href
        return (
          <a
            key={l.href}
            href={l.href}
            className={`whitespace-nowrap text-xs font-medium px-3 py-1.5 rounded-full ${
              active ? 'bg-white text-black' : 'bg-zinc-900 text-zinc-300 border border-zinc-700 hover:border-white'
            }`}
          >
            {l.label}
          </a>
        )
      })}
    </div>
  )
}