@props(['id', 'maxWidth' => '2xl','key' => null])
@php
$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',
    '3xl' => 'sm:max-w-3xl',
    '4xl' => 'sm:max-w-4xl',
    '5xl' => 'sm:max-w-5xl',
    '6xl' => 'sm:max-w-6xl',
    '7xl' => 'sm:max-w-7xl',
    '8xl' => 'sm:max-w-8xl',
][$maxWidth];
$maxHeight = [
    'sm' => 'sm:max-h-sm',
    'md' => 'sm:max-h-md',
    'lg' => 'sm:max-h-lg',
    'xl' => 'sm:max-h-xl',
    '2xl' => 'sm:max-h-2xl',
    '3xl' => 'sm:max-h-3xl',
    '4xl' => 'sm:max-h-fit',
]
@endphp
<div class="modal micromodal-slide" id="{{$id}}" aria-hidden="true" data-key={{$key}}>
    <div class="modal-overlay fixed inset-0 py-6 bg-black/60 z-50 " tabindex="-1" data-micromodal-close>
        <div class="modal-container  bg-white rounded-lg overflow-auto-y sm:w-full {{ $maxWidth }} sm:mx-auto " 
        role="dialog" aria-modal="true" aria-labelledby="{{$id}}-title">
            <header class="bg-secondary-200 rounded-t-lg text-end px-2 py-1">
                <button aria-label="Close modal" data-micromodal-close class="modal-close">
                <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </header>
            {{ $slot }}
        </div>
    </div>
</div>