@props([
    'id',                                // ID del modal (data-bs-target)
    'title' => '¿Estás seguro?',
    'message',                            // texto del cuerpo
    'confirmLabel' => 'Confirmar',
    'cancelLabel' => 'Cancelar',
    'confirmClass' => 'btn-danger',
    'action',                             // URL del form action
    'method' => 'POST',                   // POST | DELETE | PATCH
    'icon' => 'fa-triangle-exclamation',
    'iconColor' => 'text-warning',
])

{{-- Modal de confirmación reusable — patrón Bootstrap 5.
     Uso típico:
         <button data-bs-toggle="modal" data-bs-target="#confirmCancelSub">...</button>
         <x-confirm-dialog id="confirmCancelSub" message="..." :action="route(...)" />
--}}
<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-5 px-4">
                <i class="fas {{ $icon }} {{ $iconColor }} fs-3x mb-3"></i>
                <h3 class="fw-bold mb-3">{{ $title }}</h3>
                <p class="text-muted mb-0">{!! $message !!}</p>
                {{ $slot ?? '' }}
            </div>
            <div class="modal-footer border-0 justify-content-center pb-4 px-4">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ $cancelLabel }}</button>
                <form method="POST" action="{{ $action }}" class="d-inline">
                    @csrf
                    @if(in_array(strtoupper($method), ['DELETE', 'PATCH', 'PUT']))
                        @method($method)
                    @endif
                    <button type="submit" class="btn {{ $confirmClass }}">{{ $confirmLabel }}</button>
                </form>
            </div>
        </div>
    </div>
</div>