{{--
    Botão de ação reutilizável — Etapa 2A (infraestrutura de UX).

    Dois modos, escolhidos automaticamente pela presença da prop `acao`:

    1) Ação Livewire (passe `acao="nomeDoMetodo"`):
       <x-botao-acao acao="salvar" label="Salvar" icone="fa-floppy-disk" />
       Usa wire:click + wire:loading.attr="disabled" + troca de texto para
       "Salvando..." enquanto a chamada está em voo. Se o método faz
       upload/tem wire:target diferente do nome do método, informe
       `wire-target="nomeDoCampo"`.

    2) Botão de submit tradicional (sem `acao`, dentro de um <form>):
       <x-botao-acao label="Cadastrar" icone="fa-plus" />
       Usa um guard Alpine ligado ao evento `submit` do <form> ao qual o
       botão pertence ($el.form), NUNCA ao `click` do botão — desabilitar
       o botão dentro do seu próprio handler de click cancela o submit
       nativo em vários navegadores (o clique ainda não terminou de
       disparar a ação padrão quando o atributo disabled já tinha efeito;
       bug real encontrado em produção — ver histórico do projeto). Reagindo
       a `submit` em vez de `click`, o navegador já decidiu submeter o
       formulário antes do guard entrar em ação, e o mesmo guard também
       cobre confirmação por Enter (que nunca passa pelo `click` do botão).

    Isto é proteção de UX (evita novo clique enquanto a operação roda).
    NÃO é proteção de idempotência no backend — duplo clique real ainda
    pode duplicar um registro se a rota/ação não tiver sua própria
    proteção (transação, chave única, lock). Isso é tratado à parte, não
    por este componente.

    Classes extras passadas via $attributes (class="...") são mescladas
    com a classe base .btn já usada pelos layouts admin/vereador/presidente.
--}}
@props([
    'acao' => null,
    'label' => 'Salvar',
    'labelCarregando' => 'Salvando...',
    'variante' => 'primary',
    'icone' => null,
    'wireTarget' => null,
])
@php
    $classesVariante = match ($variante) {
        'success' => 'btn success',
        'danger' => 'btn danger',
        'outline' => 'btn outline',
        default => 'btn primary',
    };
    $alvo = $wireTarget ?? $acao;
@endphp
@if($acao)
    <button
        type="button"
        wire:click="{{ $acao }}"
        wire:loading.attr="disabled"
        wire:target="{{ $alvo }}"
        {{ $attributes->merge(['class' => $classesVariante]) }}
    >
        <span wire:loading.remove wire:target="{{ $alvo }}" class="botao-acao-conteudo">
            @if($icone)<i class="fa {{ $icone }}"></i>@endif{{ $label }}
        </span>
        <span wire:loading wire:target="{{ $alvo }}" class="botao-acao-conteudo">
            <i class="fa fa-spinner fa-spin"></i>{{ $labelCarregando }}
        </span>
    </button>
@else
    <button
        type="submit"
        x-data="{ enviando: false }"
        x-init="$el.form && $el.form.addEventListener('submit', () => { enviando = true })"
        :disabled="enviando"
        {{ $attributes->merge(['class' => $classesVariante]) }}
    >
        <span x-show="!enviando" class="botao-acao-conteudo">
            @if($icone)<i class="fa {{ $icone }}"></i>@endif{{ $label }}
        </span>
        <span x-show="enviando" x-cloak class="botao-acao-conteudo">
            <i class="fa fa-spinner fa-spin"></i>{{ $labelCarregando }}
        </span>
    </button>
@endif
<style>
    .botao-acao-conteudo { display: inline-flex; align-items: center; gap: 8px; }
</style>