@props(['id', 'maxWidth' => 'lg', 'title' => null])

@php
$maxWidthClass = match($maxWidth) {
    'sm' => 'max-w-sm',
    'md' => 'max-w-md',
    'lg' => 'max-w-lg',
    'xl' => 'max-w-xl',
    '2xl' => 'max-w-2xl',
    default => 'max-w-lg',
};
@endphp

<div x-data="{ show: false }"
     x-on:open-modal.window="if ($event.detail === '{{ $id }}') show = true"
     x-on:close-modal.window="if ($event.detail === '{{ $id }}') show = false"
     x-on:keydown.escape.window="show = false"
     x-show="show"
     class="fixed inset-0 z-[100] overflow-y-auto"
     style="display: none;">
    
    <!-- Overlay -->
    <div x-show="show" 
         x-transition:enter="ease-out duration-300" 
         x-transition:enter-start="opacity-0" 
         x-transition:enter-end="opacity-100" 
         x-transition:leave="ease-in duration-200" 
         x-transition:leave-start="opacity-100" 
         x-transition:leave-end="opacity-0" 
         class="fixed inset-0 bg-black/40 backdrop-blur-sm"></div>

    <!-- Modal Content -->
    <div class="flex min-h-screen items-center justify-center p-4">
        <div x-show="show"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             @click.away="show = false"
             class="bg-white rounded-2xl shadow-2xl w-full {{ $maxWidthClass }} overflow-hidden">
            
            @if($title)
                <div class="px-6 pt-6 pb-4 border-b border-border flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-text-primary">{{ $title }}</h3>
                    <button @click="show = false" class="text-text-muted hover:text-text-primary">
                        <svg class="w-5 h-5" 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>
            @endif

            <div class="px-6 py-5">
                {{ $slot }}
            </div>

            @if(isset($footer))
                <div class="px-6 pb-6 pt-4 flex gap-3 justify-end bg-surface/50">
                    {{ $footer }}
                </div>
            @endif
        </div>
    </div>
</div>