import { cn } from '../../lib/cn';

type Tab = { id: string; label: string; badge?: number };

export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; active: string; onChange: (id: string) => void; className?: string }) => (
  <div className={cn("flex gap-1 p-1 bg-slate-100 rounded-xl overflow-x-auto scrollbar-hide w-full", className)}>
    {tabs.map((t) => (
      <button
        key={t.id}
        onClick={() => onChange(t.id)}
        className={cn(
          "px-3 sm:px-6 py-1.5 sm:py-2.5 text-[10px] sm:text-sm font-black uppercase tracking-tight sm:tracking-widest transition-all rounded-lg whitespace-nowrap shrink-0",
          active === t.id
            ? "bg-slate-900 text-indigo-400 shadow-lg"
            : "text-slate-500 hover:text-slate-900 hover:bg-white/50"
        )}
      >
        {t.label}
        {t.badge && (
          <span className="ml-1 sm:ml-2 inline-flex items-center justify-center w-3.5 h-3.5 sm:w-5 sm:h-5 text-[7px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
            {t.badge}
          </span>
        )}
      </button>
    ))}
  </div>
);





