<div class="relative">
    {{-- Botón de cierre X en la esquina superior derecha --}}
    <button wire:click="closeModal"
            class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"
            aria-label="Cerrar">
        <svg class="w-6 h-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 class="p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-2 pr-8">
            {{ $title }}
        </h3>
        
        <p class="text-gray-600 mb-4">
            {{ $message }}
        </p>
        
        @if($itemName)
            <p class="text-sm font-medium text-gray-800 mb-4">
                <span class="font-semibold">{{ $itemName }}</span>
            </p>
        @endif
        
        <div class="flex justify-end space-x-3 mt-6">
            <button wire:click="closeModal"
                    class="{{ $this->getCancelButtonClasses() }}">
                {{ $cancelText }}
            </button>
            <button wire:click="confirm"
                    class="{{ $this->getConfirmButtonClasses() }}">
                {{ $confirmText }}
            </button>
        </div>
    </div>
</div>

