@props(['collapsed' => false, 'mobileOpen' => false])

<aside
    :class="[
        collapsed ? 'lg:w-20' : 'lg:w-72',
        mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
    ]"
    class="fixed top-0 left-0 z-40 w-72 h-screen bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col shadow-xl overflow-hidden transition-all duration-300">

    {{-- Brand --}}
    <div class="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-800 flex-shrink-0">
        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 overflow-hidden min-w-0">
            <div class="w-10 h-10 min-w-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-glow flex-shrink-0">
                <i data-lucide="hexagon" class="w-5 h-5 text-white"></i>
            </div>
            <div x-show="!collapsed" class="flex flex-col leading-tight min-w-0">
                <span class="font-bold text-base text-slate-900 dark:text-white whitespace-nowrap">ABC YARN</span>
                <span class="text-[10px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">House ERP</span>
            </div>
        </a>
        <button @click="toggleDesktop()" class="hidden lg:flex w-8 h-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
            <i data-lucide="panel-left-close" x-show="!collapsed" class="w-4 h-4"></i>
            <i data-lucide="panel-left-open" x-show="collapsed" x-cloak class="w-4 h-4"></i>
        </button>
        <button @click="closeMobile()" class="lg:hidden p-2 text-slate-500">
            <i data-lucide="x" class="w-5 h-5"></i>
        </button>
    </div>

    {{-- Search --}}
    <div x-show="!collapsed" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
        <div class="relative">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
            <input type="text" placeholder="Quick search..."
                class="w-full pl-9 pr-3 py-2 text-sm bg-slate-100 dark:bg-slate-800 border-0 rounded-xl focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-slate-900 transition" />
        </div>
    </div>

    {{-- Navigation --}}
    <nav class="flex-1 overflow-y-auto overflow-x-hidden px-3 py-4">
        @include('components.sidebar-menu')
    </nav>

    {{-- Sidebar bottom padding --}}
    <div class="p-3 flex-shrink-0"></div>
</aside>
