@props([
    'title' => 'Are you sure?',
    'message' => 'This action cannot be undone.',
    'confirmText' => 'Yes, Delete',
    'cancelText' => 'Cancel',
    'formAction' => '#',
])

<div
    x-data="{ open: false }"
    x-show="open"
    x-on:confirm-delete.window="open = true"
    x-on:close-confirm.window="open = false"
    class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"
    style="display: none;"
>
    <div class="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 space-y-4">
        <h2 class="text-lg font-bold text-gray-800">{{ $title }}</h2>
        <p class="text-sm text-gray-600">{{ $message }}</p>

        <div class="flex justify-end space-x-4 pt-2">
            <button x-on:click="open = false" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 text-sm">
                {{ $cancelText }}
            </button>
            <form method="POST" action="{{ $formAction }}">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm">
                    {{ $confirmText }}
                </button>
            </form>
        </div>
    </div>
</div>