"use client";

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

const TABS: Array<{ href: string; label: string; match: (pathname: string) => boolean }> = [
  {
    href: "/experienciometro",
    label: "Resumen",
    match: (pathname) => pathname === "/experienciometro" || pathname.startsWith("/experienciometro/sucursales"),
  },
  {
    href: "/experienciometro/evaluaciones",
    label: "Evaluaciones",
    match: (pathname) => pathname.startsWith("/experienciometro/evaluaciones"),
  },
  {
    href: "/experienciometro/hallazgos",
    label: "Hallazgos",
    match: (pathname) => pathname.startsWith("/experienciometro/hallazgos"),
  },
  {
    href: "/experienciometro/configuracion",
    label: "Configuración",
    match: (pathname) => pathname.startsWith("/experienciometro/configuracion"),
  },
];

export default function ExperienciometroTabs() {
  const pathname = usePathname();

  return (
    <nav className="flex flex-wrap gap-2 rounded-benell border border-benell-stroke bg-benell-surface p-2" aria-label="Navegación Experienciómetro">
      {TABS.map((tab) => {
        const active = tab.match(pathname);

        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              "rounded-pill px-4 py-2 text-sm font-semibold transition",
              active ? "bg-benell-brown text-white" : "text-benell-text hover:bg-benell-surface-muted"
            )}
          >
            {tab.label}
          </Link>
        );
      })}
    </nav>
  );
}
