@props([
    'name',
    'title' => null,
    'size' => 'md', // sm, md, lg, xl
])

@php $sizes = ['sm' => 'max-w-sm', 'md' => 'max-w-md', 'lg' => 'max-w-2xl', 'xl' => 'max-w-4xl']; @endphp

<div x-data="{ open: false }" x-on:open-modal-{{ $name }}.window="open = true" x-on:close-modal-{{ $name }}.window="open = false" x-cloak>
    <div x-show="open" x-transition.opacity class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50"></div>
    <div x-show="open" x-transition class="fixed inset-0 z-50 overflow-y-auto p-4 flex items-center justify-center">
        <div @click.outside="open = false" class="relative bg-white dark:bg-slate-900 rounded-2xl shadow-card border border-slate-200 dark:border-slate-800 w-full {{ $sizes[$size] }} max-h-[90vh] overflow-hidden flex flex-col">
            @if($title)
                <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between flex-shrink-0">
                    <h3 class="text-base font-semibold text-slate-900 dark:text-white">{{ $title }}</h3>
                    <button @click="open = false" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            @endif
            <div class="px-6 py-5 overflow-y-auto flex-1">
                {{ $slot }}
            </div>
            @isset($footer)
                <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-2 flex-shrink-0 bg-slate-50/50 dark:bg-slate-900/50">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>
