<!-- resources/views/components/confirmation-modal.blade.php -->
@props(['show' => false])

<div x-data="{ show: @entangle($attributes->wire('model')) }" 
     x-show="show"
     class="fixed inset-0 z-50 overflow-y-auto">
    <!-- Fondo oscuro -->
    <div class="fixed inset-0 bg-black opacity-50"></div>
    
    <!-- Contenido del modal -->
    <div class="min-h-screen flex items-center justify-center p-4">
        <div @click.away="show = false" 
             class="bg-white rounded-lg overflow-hidden shadow-xl max-w-md w-full">
            <div class="px-6 py-4 border-b">
                <h3 class="text-lg font-medium text-gray-900">{{ $title }}</h3>
            </div>
            
            <div class="px-6 py-4">
                {{ $content }}
            </div>
            
            <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-4">
                {{ $footer }}
            </div>
        </div>
    </div>
</div>