@props([
    'show'     => 'showModal',   // nama variabel Alpine x-show
    'size'     => 'md',          // sm | md | lg | xl | 2xl
    'title'    => '',
    'noPadding' => false,
])

@php
$sizes = [
    'sm'  => 'max-w-sm',
    'md'  => 'max-w-lg',
    'lg'  => 'max-w-2xl',
    'xl'  => 'max-w-4xl',
    '2xl' => 'max-w-6xl',
];
$sizeClass = $sizes[$size] ?? 'max-w-lg';
@endphp

{{--
USAGE:
<x-modal show="showModal" title="Judul Modal" size="lg">
    <x-slot:trigger>
        ...tombol pemicu...
    </x-slot:trigger>
    ... isi modal ...
    <x-slot:footer>
        ...tombol aksi bawah...
    </x-slot:footer>
</x-modal>
--}}

<div x-show="{{ $show }}"
     x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-gray-900/60 dark:bg-gray-900/80 p-4"
     @keydown.escape.window="{{ $show }} = false">

    <div x-show="{{ $show }}"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         @click.stop
         class="relative w-full {{ $sizeClass }} bg-white rounded-lg shadow dark:bg-gray-700">

        {{-- Header --}}
        <div class="flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                {{ $title }}
            </h3>
            <button type="button" @click="{{ $show }} = false"
                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
                <span class="sr-only">Tutup modal</span>
            </button>
        </div>

        {{-- Body --}}
        <div class="{{ $noPadding ? '' : 'p-6 space-y-4' }}">
            {{ $slot }}
        </div>

        {{-- Footer --}}
        @if(isset($footer))
            <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b dark:border-gray-600">
                {{ $footer }}
            </div>
        @endif
    </div>
</div>