@props([
    'title' => '',
    'closable' => true,
    'closeTrigger' => '',
    'open' => false,
    'width' => 'max-w-3xl'
])
<div x-data="{ open: {{ $open ? 'true' : 'false' }} }">
    {{-- Modal container with backdrop --}}
    <div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto"
        x-show="open" x-cloak
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0">
        
        {{-- Backdrop overlay --}}
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
            @click="{{ $closable ? 'open = false' : '' }}"></div>
        
        {{-- Modal content --}}
        <div class="relative px-6 py-4 w-full mx-2 md:mx-auto text-left bg-background-secondary rounded-xl shadow-2xl border border-neutral/50 {{ $width }}"
            x-show="open"
            x-transition:enter="transition ease-out duration-150"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-100"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop>
            <div class="flex justify-between items-center">
                <h2 class="text-2xl font-semibold text-color-base">{{ $title }}</h2>
                @if ($closable && !$closeTrigger)
                    <button @click="open = false" class="text-color-muted hover:text-color-base hover:bg-neutral/20 p-2 rounded-lg transition-all duration-200">
                        <x-ri-close-fill class="size-5" />
                    </button>
                @elseif ($closable && $closeTrigger)
                    {{ $closeTrigger }}
                @endif
            </div>
            <div class="mt-4">
                {{ $slot }}
            </div>
        </div>
    </div>

</div>