'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function EventTabs({ eventId }: { eventId: string }) {
  const path = usePathname()
  const base = `/panel/eventos/${eventId}`
  const tabs = [
    { href: base, label: 'Resumen' },
    { href: `${base}/menu`, label: 'Menú' },
    { href: `${base}/estaciones`, label: 'Barras y caja' },
    { href: `${base}/qr`, label: 'QR y pantalla' },
    { href: `${base}/cierre`, label: 'Cierre' },
  ]
  return (
    <nav className="-mx-4 mb-6 flex gap-1 overflow-x-auto px-4 [scrollbar-width:none] md:mx-0 md:px-0">
      {tabs.map(t => {
        const on = t.href === base ? path === base : path.startsWith(t.href)
        return (
          <Link key={t.href} href={t.href}
            className={`whitespace-nowrap rounded-full px-4 py-2 text-sm transition ${on ? 'bg-ink-950 font-semibold text-white' : 'bg-white text-gray-500 hover:text-gray-900'}`}>
            {t.label}
          </Link>
        )
      })}
    </nav>
  )
}