@props(['id', 'title', 'maxWidth' => 'md'])
{{--
    Usage:
    <x-modal id="add-item" title="Add menu item">
        ...form fields...
        <x-slot:footer><button class="btn-primary">Save</button></x-slot:footer>
    </x-modal>
    Trigger from anywhere with: x-on:click="$dispatch('open-modal-{id}')"
--}}
<div
    x-data="{ open: false }"
    x-on:open-modal-{{ $id }}.window="open = true"
    x-on:keydown.escape.window="open = false"
    x-show="open"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
    <div x-show="open" x-transition.opacity class="absolute inset-0 bg-ink/50" x-on:click="open = false"></div>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        class="relative card w-full max-w-{{ $maxWidth }} max-h-[90vh] overflow-y-auto"
    >
        <div class="flex items-center justify-between px-5 py-4 border-b border-border">
            <h3 class="font-display font-bold text-base text-ink">{{ $title }}</h3>
            <button x-on:click="open = false" class="text-ink-faint hover:text-ink"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <div class="p-5">
            {{ $slot }}
        </div>
        @isset($footer)
            <div class="flex items-center justify-end gap-2 px-5 py-4 border-t border-border bg-bg/50 rounded-b-xl2">
                {{ $footer }}
            </div>
        @endisset
    </div>
</div>