// SegmentedTabs — controle segmentado (abas em cápsula) PADRÃO do app.
// Grupo de abas mutuamente exclusivas num trilho cinza; a ativa vira um cartão
// branco com a cor de destaque. Responsivo: no mobile ocupa a largura toda e
// distribui igual; no desktop encolhe ao conteúdo. Referência: /minhas-salas.
import React from 'react';

export interface SegTab<T extends string = string> {
  id: T;
  label: string;
  icon?: React.ElementType;
  badge?: number;
}

interface SegmentedTabsProps<T extends string> {
  tabs: SegTab<T>[];
  value: T;
  onChange: (id: T) => void;
  /** Cor de destaque da aba ativa (texto + badge). Padrão: teal do app. */
  accent?: string;
  className?: string;
}

export function SegmentedTabs<T extends string>({ tabs, value, onChange, accent = '#0d9488', className = '' }: SegmentedTabsProps<T>) {
  return (
    <div className={`flex gap-1 bg-gray-100/80 p-1 rounded-2xl w-full sm:w-fit overflow-x-auto ${className}`}>
      {tabs.map((t) => {
        const active = value === t.id;
        const Icon = t.icon;
        return (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-3 sm:px-5 py-2.5 rounded-xl text-[11px] font-black uppercase tracking-wider whitespace-nowrap transition-all ${active ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
            style={active ? { color: accent } : {}}
          >
            {Icon && <Icon size={14} className="shrink-0" />}
            <span className="truncate">{t.label}</span>
            {t.badge ? (
              <span className="text-[9px] font-black px-1.5 py-0.5 rounded-full text-white shrink-0" style={{ backgroundColor: accent }}>{t.badge}</span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}