apps/web/src/components/FilterTabs.tsx

'use client'

import type { FilterPreset } from '@/lib/types'

const TABS: { id: FilterPreset; label: string; hint: string }[] = [
  { id: 'premio',     label: 'Prêmio Leg. 57', hint: 'Quem concorre ao prêmio da legislatura: ao menos 12 meses de exercício, tenha ou não deixado o mandato' },
  { id: 'geral',      label: 'Geral',          hint: 'Todos que exerceram o mandato na Leg. 57, inclusive quem exerceu menos de 12 meses e está fora de competição' },
  { id: 'ativos',     label: 'Em exercício',   hint: 'Somente quem exerce o mandato hoje' },
  { id: 'titulares',  label: 'Titulares',      hint: 'Apenas titulares em exercício (plenos e que retornaram)' },
  { id: 'suplentes',  label: 'Suplentes',      hint: 'Suplentes que estão exercendo o mandato' },
  { id: 'recentes',   label: 'Recém-empossados', hint: 'Em exercício há menos de 6 meses' },
  { id: 'encerrados', label: 'Mandato encerrado', hint: 'Exerceram o mandato na Leg. 57 e já saíram — continuam avaliados para o prêmio' },
  { id: 'afastados',  label: 'Afastados',      hint: 'Situação formal de afastamento na lista oficial do Senado (sem score)' },
]

export default function FilterTabs({
  active,
  onChange,
  counts,
}: {
  active: FilterPreset
  onChange: (f: FilterPreset) => void
  counts?: Partial<Record<FilterPreset, number>>
}) {
  return (
    <nav
      role="tablist"
      aria-label="Filtros do ranking"
      className="-mx-1 flex flex-wrap gap-1 border-b border-border"
    >
      {TABS.map((t) => {
        const isActive = active === t.id
        const count = counts?.[t.id]
        return (
          <button
            key={t.id}
            role="tab"
            aria-selected={isActive}
            title={t.hint}
            onClick={() => onChange(t.id)}
            className={`relative px-3 py-2 text-xs uppercase tracking-wider font-medium transition-colors
              ${isActive
                ? 'text-ink border-b-2 border-primary -mb-px'
                : 'text-muted hover:text-ink border-b-2 border-transparent -mb-px'}`}
          >
            {t.label}
            {typeof count === 'number' && (
              <span className={`ml-1.5 inline-block rounded-sm px-1 text-[10px] font-mono ${isActive ? 'bg-primary/10 text-primary' : 'bg-border/40 text-muted'}`}>
                {count}
              </span>
            )}
          </button>
        )
      })}
    </nav>
  )
}