@props(['name', 'show' => false, 'maxWidth' => '2xl', 'focusable' => true])

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

<div
    x-data="{ show: @js($show) }"
    x-show="show"
    x-on:open-modal.window="show = ($event.detail.name === @js($name))"
    x-on:close-modal.window="show = false"
    {{ $attributes->merge(['class' => 'fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50']) }}
    style="display: none;"
>
    <div x-show="show" class="fixed inset-0 bg-gray-500/75 transition-opacity" @click="show = false"></div>

    <div
        x-show="show"
        x-transition
        class="mb-6 bg-white rounded-lg shadow-xl transform transition-all sm:w-full {{ $maxWidthClass }} sm:mx-auto"
        {{ $focusable ? '@keydown.escape="show = false"' : '' }}
    >
        {{ $slot }}
    </div>
</div>