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

@php
    $paddingLeft = $level === 0 ? 'p-3' : 'py-2 ' . ($level === 1 ? 'pl-7' : 'pl-' . (7 + ($level - 1) * 4)); 
    // Simplified indentation logic: Level 0: p-3, Level 1: pl-7, Level 2: pl-11, etc.
    // However, Tailwind classes need to be safelisted or static. 
    // Let's use inline style for dynamic indentation or static classes for depth 0-5.
    
    // Better approach: nested divs typically handle structure, but here we want flat list appearance with indent.
    // Given the previous code used `pl-11`, `pl-7`. 
    // Let's use style for padding-left to be truly recursive without massive Tailwind whitelist.
    $indent = 12 + ($level * 16) . 'px'; // Base 12px + 16px per level (approx)
    if($level === 0) $indent = '0.75rem'; // p-3 = 12px? No, p-3 is 0.75rem (12px). 
@endphp

@if(!empty($item['children']))
    <div class="space-y-1">
        <button class="submenu-toggle w-full flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl group transition-colors {{ $level === 0 ? 'p-3' : 'py-2 pr-2' }}" 
                style="{{ $level > 0 ? 'padding-left: ' . $indent : '' }}"
                data-target="mobile-menu-{{ $item['id'] }}">
            <div class="flex items-center gap-3">
                @if($level === 0)
                     <span class="material-symbols-outlined text-gray-500 group-hover:text-primary transition-colors">grid_view</span>
                     <span class="text-text-main dark:text-white font-semibold">{{ $item['title'] }}</span>
                @else
                     <span class="text-text-main dark:text-white font-medium text-sm">{{ $item['title'] }}</span>
                @endif
            </div>
            <span class="material-symbols-outlined text-gray-400 text-[18px] transition-transform duration-200">expand_more</span>
        </button>
        
        <div id="mobile-menu-{{ $item['id'] }}" class="hidden overflow-hidden space-y-1 {{ $level === 0 ? 'pl-4' : '' }}">
            {{-- Recursive Loop --}}
            @foreach($item['children'] as $child)
                @include('theme::partials.menu.mobile-item', ['item' => $child, 'level' => $level + 1])
            @endforeach
        </div>
    </div>
@else
    <a class="flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {{ $level === 0 ? 'p-3' : 'py-2 pr-2' }}"
       style="{{ $level > 0 ? 'padding-left: ' . $indent : '' }}"
       href="{{ $item['url'] }}">
        @if($level === 0)
            <span class="material-symbols-outlined text-gray-500">arrow_right_alt</span>
            <span class="text-text-main dark:text-white font-medium">{{ $item['title'] }}</span>
        @else
            <span class="text-text-muted hover:text-primary transition-colors text-sm">{{ $item['title'] }}</span>
        @endif
    </a>
@endif