@props([
    'title' => '',
    'close' => 'closeModal',
    'submit' => null,
    'confirmLabel' => 'Simpan',
    'confirmVariant' => 'primary',
    'maxWidth' => 'max-w-lg',
])

{{--
    Modal digerakkan Livewire: parent membungkusnya dengan @if($showModal). Tombol
    tutup/backdrop memanggil method $close (nama method Livewire, mis. "closeModal").
    Isi form lewat default slot; angka footer lewat slot :footer.
--}}
<div class="fixed inset-0 z-[9999] flex items-center justify-center p-4 overflow-y-auto" wire:key="modal-shell">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="{{ $close }}"></div>

    <div class="relative bg-white dark:bg-card rounded-xl shadow-2xl w-full {{ $maxWidth }} max-h-[90vh] my-auto flex flex-col overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-border shrink-0 flex items-center justify-between gap-4">
            <h3 class="text-lg font-semibold text-foreground">{{ $title }}</h3>
            <button type="button" wire:click="{{ $close }}" class="text-muted-foreground hover:text-foreground transition-colors" aria-label="Tutup">
                <x-ui.icon name="x-mark" size="w-5 h-5" />
            </button>
        </div>

        <div class="p-6 overflow-y-auto flex-1 min-h-0">
            {{ $slot }}
        </div>

        @if ($submit || isset($footer))
            <div class="px-6 py-4 border-t border-gray-100 dark:border-border shrink-0 flex items-center justify-end gap-3">
                @isset($footer)<div class="mr-auto text-sm text-muted-foreground">{{ $footer }}</div>@endisset
                <x-ui.button variant="outline" wire:click="{{ $close }}">Batal</x-ui.button>
                @if ($submit)
                    <x-ui.button :variant="$confirmVariant" wire:click="{{ $submit }}" :loading="$submit">{{ $confirmLabel }}</x-ui.button>
                @endif
            </div>
        @endif
    </div>
</div>