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

<div x-data="{ open: false }">
    <span @click="open = true">
        {{ $trigger }}
    </span>

    <div x-show="open"
         x-cloak
         class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm px-4">

        <div @click.away="open = false"
             class="bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden">

            <div class="p-8 text-center">
                <div class="mx-auto mb-5 w-20 h-20 rounded-full
                    {{ $type == 'danger' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700' }}
                    flex items-center justify-center text-4xl">
                    {{ $type == 'danger' ? '⚠️' : 'ℹ️' }}
                </div>

                <h2 class="text-2xl font-black text-slate-900">
                    {{ $title }}
                </h2>

                <p class="text-slate-600 mt-3 leading-relaxed">
                    {{ $message }}
                </p>
            </div>

            <div class="bg-slate-50 px-8 py-5 flex justify-center gap-3">
                <button type="button"
                        @click="open = false"
                        class="px-6 py-3 rounded-xl bg-gray-200 text-slate-900 font-black">
                    {{ $cancelText }}
                </button>

                {{ $confirm }}
            </div>

        </div>
    </div>
</div>