@props([
    'id' => 'deleteModal',
    'formId' => 'confirmDeleteForm',
    'cancelId' => 'cancelDeleteBtn',
    'title' => 'Confirmar eliminación',
    'message' => '¿Estás seguro de que deseas eliminar?',
])

<div id="{{ $id }}" class="fixed inset-0 z-40 overflow-y-auto hidden">
    <div class="fixed inset-0 bg-primary/80 transition-opacity"
        onclick="document.getElementById('{{ $id }}').classList.add('hidden')">
    </div>

    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="relative bg-white rounded-lg shadow-xl max-w-sm w-full p-6 text-center">
            
            <h3 class="text-black text-size-subtitle">{{ $title }}</h3>

            <p class="js-modal-message text-parrafo mt-4 text-accent">{{ $message }}</p>

            <div class="mt-6 flex justify-center space-x-3">
                <x-buttons.button id="{{ $cancelId }}" variant="secondary">
                    Cancelar
                </x-buttons.button>

                <form id="{{ $formId }}" method="POST" class="inline-block">
                    @csrf
                    @method('DELETE')
                    <x-buttons.button type="submit" id="{{ $cancelId }}" variant="remove">
                        Sí, Eliminar
                    </x-buttons.button>
                </form>
            </div>
        </div>
    </div>
</div>