@props(['show' => 'false', 'title' => null, 'width' => '2xl', 'closeAction' => null])

@php
    $widths = [
        'sm' => 'max-w-sm', 'md' => 'max-w-md', 'lg' => 'max-w-lg',
        'xl' => 'max-w-xl', '2xl' => 'max-w-2xl', '3xl' => 'max-w-3xl',
        '4xl' => 'max-w-4xl', '5xl' => 'max-w-5xl', 'full' => 'max-w-[95vw]',
    ];
@endphp

<div
    x-data
    x-show="$wire.{{ $show }}"
    x-cloak
    x-transition.opacity
    @keydown.escape.window="@if ($closeAction) $wire.{{ $closeAction }} @endif"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-[2px]"
         @if ($closeAction) @click="$wire.{{ $closeAction }}" @endif></div>

    <div class="relative flex min-h-full items-start justify-center p-4 sm:p-8">
        <div class="w-full {{ $widths[$width] ?? $widths['2xl'] }} card shadow-xl">
            @if ($title)
                <div class="card-header">
                    <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ $title }}</h2>

                    @if ($closeAction)
                        <button type="button" wire:click="{{ $closeAction }}"
                                class="text-slate-400 hover:text-slate-600" aria-label="Close">
                            <x-ui.icon name="x" class="h-5 w-5" />
                        </button>
                    @endif
                </div>
            @endif

            <div class="card-body max-h-[70vh] overflow-y-auto">{{ $slot }}</div>

            @isset($footer)
                <div class="flex flex-wrap items-center justify-end gap-2 border-t border-slate-200 px-5 py-3.5 dark:border-slate-800">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>