@if($itemToDelete)
    <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" id="delete-modal">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900">Confirm Delete</h3>
                    <button wire:click="$set('itemToDelete', null)" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="mt-2">
                    <p class="text-sm text-gray-500">
                        Are you sure you want to delete this {{ $itemType ?? 'item' }}? This action cannot be undone.
                    </p>
                </div>
                <div class="mt-6 flex justify-end space-x-3">
                    <button wire:click="$set('itemToDelete', null)" 
                            class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button wire:click="{{ $deleteMethod ?? 'deleteItem' }}('{{ $itemToDelete }}')" 
                            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                        Delete {{ ucfirst($itemType ?? 'Item') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endif