@props(['show' => false, 'maxWidth' => 'lg', 'cerrar' => "\$set('modalAbierto', false)"])

@php
$anchos = [
    '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',
][$maxWidth];
@endphp

@if ($show)
    <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0" x-data x-on:keydown.escape.window="$wire.{{ ltrim($cerrar, '$') }}">
        <div class="fixed inset-0 bg-stone-900/50" wire:click="{{ $cerrar }}"></div>

        <div {{ $attributes->merge(['class' => "relative mb-6 bg-white rounded-2xl overflow-hidden shadow-xl sm:w-full {$anchos} sm:mx-auto"]) }}>
            {{ $slot }}
        </div>
    </div>
@endif