@props(['showVar' => 'showDeleteModal', 'title' => 'Confirmer la suppression', 'confirmText' => 'Supprimer', 'cancelText' => 'Annuler', 'confirmAction' => 'confirmDelete'])

<div x-show="{{ $showVar }}" x-cloak class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="delete-modal-title">
    <div class="flex min-h-screen items-center justify-center p-4">
        <div x-show="{{ $showVar }}" @click="{{ $showVar }} = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
        <div x-show="{{ $showVar }}" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
            <div class="p-6">
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-800 text-center mb-2" id="delete-modal-title">{{ $title }}</h3>
                <p class="text-slate-600 text-center mb-6">
                    {{ $slot }}
                </p>
                <div class="flex gap-3">
                    <button type="button" @click="{{ $confirmAction }}()" class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        {{ $confirmText }}
                    </button>
                    <button type="button" @click="{{ $showVar }} = false" class="px-4 py-2.5 border border-slate-300 hover:bg-slate-50 font-medium rounded-lg transition-colors">
                        {{ $cancelText }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>