@props(['name' ,'title'=> null,'height' => '75vh'])
<div>
    <div
        x-show=""
        x-transition:enter="transform transition ease-in-out duration-300"
        x-transition:enter-start="translate-y-full"
        x-transition:enter-end="translate-y-0"
        x-transition:leave="transform transition ease-in-out duration-300"
        x-transition:leave-start="translate-y-0"
        x-transition:leave-end="translate-y-full"
        class="fixed bottom-0 left-0 w-full bg-white shadow-xl rounded-t-3xl p-6 z-12 pb-[50px] md:w-1/2 md:mx-auto md:left-1/2 md:-translate-x-1/2"
        style="display: none; height: ;"
        @click.away=" = false">



        <!-- Drawer Header (Fixed) -->
        <div class="p-4 flex justify-between items-center border-b border-gray-200">
            <h2 class="text-lg font-semibold">
                @if ($title != null)
                {{ __($title) }}
                @endif
            </h2>
            <button @click="{{ $name }} = false; history.replaceState(null, document.title, window.location.href)" class="text-gray-600 hover:text-gray-900">✕</button>
        </div>

        <!-- Scrollable Drawer Content -->
        <div id="" class="flex-1 overflow-y-auto p-3 h-full">
            {{ $slot }}
        </div>

    </div>
</div>