@props(['show', 'title' => 'Are you sure?', 'message' => null, 'confirmLabel' => 'Delete', 'confirmAction', 'cancelAction'])

<x-ui.modal :show="$show" width="md" :close-action="$cancelAction">
    <div class="flex gap-4">
        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-50 text-red-600 dark:bg-red-950">
            <x-ui.icon name="alert" class="h-5 w-5" />
        </div>

        <div>
            <p class="text-sm font-semibold text-slate-900 dark:text-white">{{ $title }}</p>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                {{ $message ?? 'This cannot be undone.' }}
            </p>
        </div>
    </div>

    <x-slot:footer>
        <x-ui.button wire:click="{{ $cancelAction }}">Cancel</x-ui.button>
        <x-ui.button variant="danger" wire:click="{{ $confirmAction }}" :loading="$confirmAction">
            {{ $confirmLabel }}
        </x-ui.button>
    </x-slot:footer>
</x-ui.modal>