@props([
    'title' => 'Hapus data?',
    'message' => 'Data yang dihapus tidak dapat dikembalikan.',
    'confirm' => null,
    'close' => 'closeConfirm',
    'confirmLabel' => 'Hapus',
    'confirmVariant' => 'danger',
    'icon' => 'trash',
    'iconColor' => 'rose',
])

@php
    $bubbles = [
        'rose' => 'bg-rose-100 dark:bg-rose-500/10 text-rose-500',
        'emerald' => 'bg-emerald-100 dark:bg-emerald-500/10 text-emerald-500',
        'amber' => 'bg-amber-100 dark:bg-amber-500/10 text-amber-500',
    ];
    $bubble = $bubbles[$iconColor] ?? $bubbles['rose'];
@endphp

<div class="fixed inset-0 z-[9999] flex items-center justify-center p-4" wire:key="confirm-shell">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="{{ $close }}"></div>

    <div class="relative bg-white dark:bg-card rounded-xl shadow-2xl w-full max-w-sm p-6">
        <div class="text-center mb-6">
            <div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 {{ $bubble }}">
                <x-ui.icon :name="$icon" size="w-7 h-7" />
            </div>
            <h3 class="text-lg font-semibold text-foreground">{{ $title }}</h3>
            <p class="text-sm text-muted-foreground mt-1">{{ $message }}</p>
        </div>
        <div class="flex gap-3">
            <x-ui.button variant="outline" class="flex-1" wire:click="{{ $close }}">Batal</x-ui.button>
            <x-ui.button :variant="$confirmVariant" class="flex-1" wire:click="{{ $confirm }}" :loading="$confirm">{{ $confirmLabel }}</x-ui.button>
        </div>
    </div>
</div>