@props(['abas', 'atual', 'modelo' => 'aba', 'rotulos' => []])

{{-- Abas em pílulas, com a cor da loja quando a aba é uma loja. --}}
<nav {{ $attributes->class(['flex flex-wrap gap-1.5']) }}>
    @foreach ($abas as $opcao)
        @php $ativa = $opcao === $atual; @endphp
        <button type="button" wire:click="$set('{{ $modelo }}', @js($opcao))"
                @if ($ativa) aria-current="page" @endif
                @class([
                    'inline-flex items-center gap-2 rounded-md border px-3.5 py-1.5 text-sm font-medium transition-colors',
                    'border-marca-600 bg-marca-50 text-marca-900' => $ativa,
                    'border-fio bg-superficie text-suave hover:border-suave/40 hover:text-tinta' => ! $ativa,
                ])>
            @if (in_array($opcao, ['JOAÇABA', 'CATANDUVAS', 'CONCÓRDIA', 'GERAL', 'TOTAL LOJAS'], true))
                <span class="size-2 rounded-full" style="background: {{ \App\Visual\Cores::de($opcao) }}" aria-hidden="true"></span>
            @endif
            {{ $rotulos[$opcao] ?? $opcao }}
        </button>
    @endforeach
</nav>