import { cn } from "./cn";

export interface TabDef<T extends string> {
  key: T;
  label: string;
  count?: number;
}

// Tabs 受控标签条（下划线高亮）。
export function Tabs<T extends string>({
  tabs,
  value,
  onChange,
  className,
}: {
  tabs: TabDef<T>[];
  value: T;
  onChange: (v: T) => void;
  className?: string;
}) {
  return (
    <div className={cn("flex items-center gap-1", className)}>
      {tabs.map((t) => {
        const active = t.key === value;
        return (
          <button
            key={t.key}
            onClick={() => onChange(t.key)}
            className={cn(
              "relative px-3 py-2 text-xs transition",
              active ? "font-medium text-brand-400" : "text-slate-500 hover:text-slate-300",
            )}
          >
            {t.label}
            {t.count != null && t.count > 0 && (
              <span className="ml-1 rounded bg-ink-800 px-1 text-[9px] text-slate-400">{t.count}</span>
            )}
            {active && <span className="absolute inset-x-2 -bottom-px h-0.5 rounded bg-brand" />}
          </button>
        );
      })}
    </div>
  );
}
