@props([
    'id',
    'heading',
    'subheading',
    'subheading2'
])

<flux:modal wire:model="showDeleteModal" name="delete" class="min-w-[22rem] space-y-6">
    <div>
        <flux:heading size="lg">Delete data?</flux:heading>

        <flux:subheading>
            <p>You are about to delete this data.</p>
            <p>This action is permanent deletion.</p>
        </flux:subheading>
    </div>

    <div class="flex gap-2">
        <flux:spacer />

        <flux:modal.close>
            <flux:button variant="ghost">Cancel</flux:button>
        </flux:modal.close>

        <flux:button wire:click="delete" variant="danger">Delete</flux:button>
    </div>
</flux:modal>
