@props([
    'name',
    'action',
    'title' => 'Padam rekod?',
    'message' => 'Tindakan ini tidak boleh dibuat asal. Sahkan untuk teruskan.',
])

<x-modal :name="$name" focusable maxWidth="md">
    <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-900">{{ $title }}</h3>
        <p class="mt-2 text-sm text-gray-600">{{ $message }}</p>
        <div class="mt-6 flex justify-end gap-3">
            <button
                type="button"
                class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
                @click="$dispatch('close-modal', '{{ $name }}')"
            >
                Batal
            </button>
            <form method="POST" action="{{ $action }}" class="inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="inline-flex items-center rounded-lg bg-red-700 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                    Padam
                </button>
            </form>
        </div>
    </div>
</x-modal>