// src/components/keywords/view-tabs.tsx — underlined view tabs with count
// badges (design ELEVA « Toolbar Keywords — Finale (B) »). Fully controlled,
// no persistence. Tokens are shadcn (primary underline, not the mock's orange).
"use client";

import { cn } from "@/lib/utils";

export interface ViewTab {
  id: string;
  label: string;
  count?: number;
}

/** Underlined, count-badged view tabs (« Tous · Shortlist · Exclus »). */
export function ViewTabs({
  tabs,
  value,
  onValueChange,
  className,
  "aria-label": ariaLabel,
}: {
  tabs: ViewTab[];
  value: string;
  onValueChange: (id: string) => void;
  className?: string;
  "aria-label"?: string;
}) {
  return (
    <div
      role="tablist"
      aria-label={ariaLabel}
      className={cn("flex items-center gap-0.5 border-b", className)}
    >
      {tabs.map((tab) => {
        const active = tab.id === value;
        return (
          <button
            key={tab.id}
            type="button"
            role="tab"
            aria-selected={active}
            // Re-clic sur l'onglet actif = no-op : les handlers de bascule ont
            // des effets de bord (tri forcé, sélection vidée, refetch).
            onClick={() => {
              if (!active) onValueChange(tab.id);
            }}
            // -mb-px overlaps the row's border-b so the active underline sits on it.
            className={cn(
              "-mb-px inline-flex items-center gap-2 border-b-2 border-transparent px-4 py-2.5 font-medium text-[13.5px] text-muted-foreground transition-colors",
              "hover:text-foreground",
              active && "border-primary text-foreground",
            )}
          >
            {tab.label}
            {tab.count != null ? (
              <span
                className={cn(
                  "rounded-full px-2 py-px font-semibold text-[11px] tabular-nums",
                  active
                    ? "bg-primary/15 text-primary"
                    : "bg-muted text-muted-foreground",
                )}
              >
                {tab.count}
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}