@props(['item'])

@if(isset($item['children']) && count($item['children']) > 0)
    {{-- Menu item with children (accordion) --}}
    <div class="kt-menu-item {{ $item['has_active_child'] ?? false ? 'here show' : '' }}"
         data-kt-menu-item-toggle="accordion"
         data-kt-menu-item-trigger="click">
        <div class="kt-menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] ps-[10px] pe-[10px] py-[6px]"
             tabindex="0">
            @if(isset($item['icon']))
                <span class="kt-menu-icon items-start text-muted-foreground w-[20px]">
                    <i class="{{ $item['icon'] }} text-lg"></i>
                </span>
            @endif
            <span class="kt-menu-title text-sm font-medium text-foreground kt-menu-item-active:text-primary kt-menu-link-hover:!text-primary">
                {{ $item['label'] }}
            </span>
            <span class="kt-menu-arrow text-muted-foreground w-[20px] shrink-0 justify-end ms-1 me-[-10px]">
                <span class="inline-flex kt-menu-item-show:hidden">
                    <i class="ki-filled ki-plus text-[11px]"></i>
                </span>
                <span class="hidden kt-menu-item-show:inline-flex">
                    <i class="ki-filled ki-minus text-[11px]"></i>
                </span>
            </span>
        </div>
        <div class="kt-menu-accordion gap-1 ps-[10px] relative before:absolute before:start-[20px] before:top-0 before:bottom-0 before:border-s before:border-border">
            @foreach($item['children'] as $child)
                <x-back.sidebar.child :item="$child" />
            @endforeach
        </div>
    </div>
@else
    {{-- Simple menu item --}}
    <div class="kt-menu-item {{ $item['is_active'] ?? false ? 'active' : '' }}">
        <a class="kt-menu-label border border-transparent gap-[10px] ps-[10px] pe-[10px] py-[6px] {{ $item['is_active'] ?? false ? 'active' : '' }}"
           href="{{ $item['url'] ?? '#' }}">
            @if(isset($item['icon']))
                <span class="kt-menu-icon items-start text-muted-foreground w-[20px]">
                    <i class="{{ $item['icon'] }} text-lg"></i>
                </span>
            @endif
            <span class="kt-menu-title text-sm font-medium text-foreground">
                {{ $item['label'] }}
            </span>
            @if(isset($item['badge']))
                <span class="kt-badge kt-badge-sm {{ $item['badge']['class'] ?? 'kt-badge-primary' }}">
                    {{ $item['badge']['text'] }}
                </span>
            @endif
        </a>
    </div>
@endif