import { SignOutButton } from '@/app/admin/sign-out-button'

interface AdminNavBarProps {
  active: 'dashboard' | 'responses' | 'usuarios'
}

const LINKS = [
  { id: 'dashboard', href: '/dashboard', label: 'Dashboard' },
  { id: 'responses', href: '/admin/responses', label: 'Respuestas' },
  { id: 'usuarios', href: '/admin/usuarios', label: 'Usuarios' },
] as const

// Nav compartido entre /dashboard, /admin/responses y /admin/usuarios — las
// tres pantallas detrás del login. Sin esto, cada una era una isla y el único
// modo de llegar a otra era escribir la URL a mano.
export function AdminNavBar({ active }: AdminNavBarProps) {
  return (
    <div className="admin-nav-bar">
      <nav className="admin-nav" aria-label="Navegación admin">
        {LINKS.map((link) => (
          <a
            key={link.id}
            href={link.href}
            className={`admin-nav-link${active === link.id ? ' admin-nav-link-active' : ''}`}
            aria-current={active === link.id ? 'page' : undefined}
          >
            {link.label}
          </a>
        ))}
      </nav>
      <SignOutButton />
    </div>
  )
}