@props(['item', 'level' => 0])

@if($level === 0)
    {{-- Root Level --}}
    @if(!empty($item['children']))
        <div class="relative group h-16 flex items-center px-4">
            <button class="flex items-center gap-1 text-text-main dark:text-gray-200 text-sm font-medium hover:text-primary transition-colors">
                {{ $item['title'] }}
                <span class="material-symbols-outlined text-[18px] text-gray-400 group-hover:text-primary transition-colors">keyboard_arrow_down</span>
            </button>
            {{-- Level 1 Dropdown --}}
            <div class="absolute top-16 left-0 w-48 bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-b-xl shadow-soft hidden group-hover:block p-2 animate-in fade-in slide-in-from-top-2 duration-200 z-50">
                @foreach($item['children'] as $child)
                    @include('theme::partials.menu.desktop-item', ['item' => $child, 'level' => 1])
                @endforeach
            </div>
        </div>
    @else
        <a class="px-4 text-text-muted dark:text-gray-400 text-sm font-medium hover:text-primary transition-colors" href="{{ $item['url'] }}">
            {{ $item['title'] }}
        </a>
    @endif

@else
    {{-- Sub-Levels (Level 1+) --}}
    @if(!empty($item['children']))
        <div class="relative group/sub w-full">
            <a class="flex items-center justify-between px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg text-sm font-medium text-text-main dark:text-white" href="{{ $item['url'] }}">
                {{ $item['title'] }}
                {{-- Chevron Right --}}
                <span class="material-symbols-outlined text-[16px] text-gray-400">chevron_right</span>
            </a>
            {{-- Flyout Dropdown (Right) --}}
            <div class="absolute left-full top-0 w-48 bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-xl shadow-soft hidden group-hover/sub:block p-2 ml-1 animate-in fade-in slide-in-from-left-2 duration-200 z-50">
                @foreach($item['children'] as $child)
                    @include('theme::partials.menu.desktop-item', ['item' => $child, 'level' => $level + 1])
                @endforeach
            </div>
        </div>
    @else
        <a class="block px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg text-sm font-medium text-text-main dark:text-white" href="{{ $item['url'] }}">
            {{ $item['title'] }}
        </a>
    @endif
@endif