@props(['name' => 'modal', 'slideFrom' => null])
@php
    $panelClass = $slideFrom === 'right'
        ? 'relative w-full max-w-lg bg-white p-6 shadow-xl transform transition-transform duration-300 ease-out translate-x-full'
        : 'relative w-full max-w-lg rounded-xl bg-white p-6 shadow-xl';
@endphp
<div
    x-data="{ open: false }"
    x-on:open-modal.window="if ($event.detail === '{{ $name }}') open = true"
    x-on:close-modal.window="open = false"
    x-show="open"
    x-cloak
    class="fixed inset-0 z-50 overflow-y-auto"
    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"
>
    <div class="fixed inset-0 bg-slate-900/50" @click="open = false"></div>
    <div class="flex h-full justify-end">
        <div
            @if($slideFrom === 'right')
                x-bind:class="open ? 'translate-x-0' : 'translate-x-full'"
            @endif
            {{ $attributes->merge(['class' => $panelClass]) }}
            @click.stop
        >
            @if(isset($title))
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-900">{{ $title }}</h3>
                    <button type="button" @click="open = false" class="rounded-lg p-1 hover:bg-slate-100">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            @endif
            {{ $slot }}
        </div>
    </div>
</div>