@props([
    'show' => 'open',
    'close' => null,
    'maxWidth' => 'max-w-md',
    'closeOnOutside' => true,
])

<div
    @if($close)
        @keydown.escape.window="{{ $close }}; $dispatch('modal-closed')"
    @endif
    class="flex items-center justify-center h-full fixed inset-0 z-[60]"
    x-show="{{ $show }}"
    x-transition.opacity
    x-cloak
    x-trap.noscroll="{{ $show }}"
>
    <div class="absolute inset-0 bg-black/50"></div>
    <div
        class="bg-white rounded-lg shadow-lg p-6 w-11/12 {{ $maxWidth }} max-h-[90vh] relative text-sm overflow-auto flex flex-col gap-3"
        @if($closeOnOutside && $close)
            @click.outside="{{ $close }}; $dispatch('modal-closed')"
        @endif
    >
        @if($close)
        <div class="flex justify-end">
            <button
                @click="{{ $close }}; $dispatch('modal-closed')"
                class="opacity-50 hover:opacity-100 focus:outline-none mr-4"
            >✖</button>
        </div>
        @endif
        {{ $slot }}
    </div>
</div>