@props([
    'name' => 'mobileMenu',
    'side' => 'right',   // right | left
    'width' => 'w-80',
    'title' => null,
])

@php
    $isRight = $side === 'right';
    $closed = $isRight ? 'translate-x-full right-0' : '-translate-x-full left-0';
    $open   = 'translate-x-0';
    $sideClass = $isRight ? 'right-0' : 'left-0';
@endphp

<div
    x-data="{
        open: false,
        openMenu() {
            this.open = true;
            document.documentElement.classList.add('overflow-hidden');
        },
        closeMenu() {
            this.open = false;
            document.documentElement.classList.remove('overflow-hidden');
        },
        toggleMenu() {
            this.open ? this.closeMenu() : this.openMenu();
        },
    }"
    x-on:{{ $name }}.window="toggleMenu()"
    x-on:keydown.window.escape="open && closeMenu()"
>
    {{-- Trigger --}}
    <div>
        {{ $trigger }}
    </div>

    {{-- Overlay with improved backdrop --}}
    <div
        x-show="open"
        x-transition:enter="transition-opacity ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        x-on:click="closeMenu()"
        class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
        style="display:none;"
    ></div>

    {{-- Panel with improved styling and animation --}}
    <aside
        class="fixed top-0 {{ $sideClass }} z-50 h-dvh {{ $width }} bg-white shadow-2xl
               flex flex-col"
        :class="{ '{{ $open }}': open, '{{ $closed }}': !open }"
        x-show="open"
        x-transition:enter="transform transition ease-out duration-300"
        x-transition:enter-start="{{ $closed }}"
        x-transition:enter-end="{{ $open }}"
        x-transition:leave="transform transition ease-in duration-200"
        x-transition:leave-start="{{ $open }}"
        x-transition:leave-end="{{ $closed }}"
        x-trap.inert.noscroll="open"
        style="display:none;"
        role="dialog"
        aria-modal="true"
    >
        {{-- Header with improved styling --}}
        <div class="flex items-center justify-between px-6 h-16 border-b border-gray-200 bg-white shrink-0">
            @if($title)
                <h2 class="text-lg font-semibold text-gray-900">{{ $title }}</h2>
            @else
                <div></div>
            @endif

            <button
                type="button"
                x-on:click="closeMenu()"
                class="w-10 h-10 rounded-lg grid place-items-center hover:bg-gray-100
                       active:bg-gray-200 text-gray-600 hover:text-gray-900
                       transition-colors duration-150"
                aria-label="Close menu"
            >
                <svg class="w-5 h-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>

        {{-- Content area with improved scrolling --}}
        <div class="flex-1 overflow-y-auto overscroll-contain">
            <div class="p-6">
                {{ $slot }}
            </div>
        </div>
    </aside>
</div>