@props(['legenda', 'modelo', 'valor', 'opcoes'])

{{-- Escolha entre poucas opções exclusivas, sempre visíveis.
     opcoes: lista de [valor, rótulo] — lista, e não mapa, para aceitar true/false. --}}
<fieldset class="text-sm">
    <legend class="text-xs font-medium text-suave">{{ $legenda }}</legend>
    <div class="mt-1 inline-flex rounded-md border border-fio bg-superficie p-0.5 shadow-xs">
        @foreach ($opcoes as [$opcao, $rotulo])
            @php $ativo = $opcao === $valor; @endphp
            <button type="button" wire:click="$set('{{ $modelo }}', @js($opcao))" aria-pressed="{{ $ativo ? 'true' : 'false' }}"
                    @class([
                        'rounded px-3 py-1 font-medium transition-colors',
                        'bg-marca-700 text-white' => $ativo,
                        'text-suave hover:text-tinta' => ! $ativo,
                    ])>{{ $rotulo }}</button>
        @endforeach
    </div>
</fieldset>