@props([
    'id',
    'title' => null,
    'description' => null,
    'width' => 'lg',
    'side' => 'right',
    'onClose' => null,
])

@php
    $widths = [
        'sm'   => 'max-w-sm',
        'md'   => 'max-w-md',
        'lg'   => 'max-w-lg',
        'xl'   => 'max-w-xl',
        '2xl'  => 'max-w-2xl',
        '3xl'  => 'max-w-3xl',
        'full' => 'max-w-full',
    ];

    $widthClass = $widths[$width] ?? $widths['lg'];
    $isLeft = $side === 'left';
    $justifyClass = $isLeft ? 'justify-start' : 'justify-end';
    $translateClosed = $isLeft ? '-translate-x-full' : 'translate-x-full';
    $borderClass = $isLeft ? 'border-r' : 'border-l';
@endphp

<div id="{{ $id }}" {{ $attributes->merge(['class' => "admin-drawer fixed inset-0 w-screen h-screen  z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto flex $justifyClass"]) }}>
    <!-- Backdrop Overlay Target -->
    <div class="fixed inset-0" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}"></div>

    <!-- Slide-Over Drawer Content Container -->
    <div class="drawer-panel relative z-10 w-full {{ $widthClass }} h-full bg-slate-900 {{ $borderClass }} border-slate-700/60 shadow-2xl flex flex-col text-white transform {{ $translateClosed }} transition-transform duration-300 ease-out [.active_&]:translate-x-0">
        <!-- Header -->
        <div class="flex items-start justify-between p-6 border-b border-white/10 shrink-0">
            <div class="pr-4">
                @if($title)
                    <h3 class="font-outfit text-xl font-bold text-white m-0 leading-snug">{{ $title }}</h3>
                @endif
                @if($description)
                    <p class="text-xs text-slate-400 mt-1 mb-0 leading-relaxed">{{ $description }}</p>
                @endif
            </div>
            <button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="w-8 h-8 rounded-lg bg-slate-800/80 border border-slate-700/60 text-slate-400 hover:text-white hover:bg-slate-700/60 transition-colors flex items-center justify-center cursor-pointer shrink-0 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Scrollable Body Content -->
        <div class="flex-1 overflow-y-auto p-6 space-y-4">
            {{ $slot }}
        </div>

        <!-- Optional Fixed Footer -->
        @if(isset($footer))
            <div class="p-6 border-t border-white/10 bg-slate-950/40 shrink-0">
                {{ $footer }}
            </div>
        @endif
    </div>
</div>