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

@php
    $isActive = request('category') == $category->slug;
    $hasChildren = $category->children->isNotEmpty();
    // Check if any child is active to keep parent expanded
    $isOpen = in_array($category->slug, $expandedSlugs);
@endphp

<div class="flex flex-col" x-data="{ open: {{ $isOpen ? 'true' : 'false' }} }">
    <div class="flex items-center justify-between py-1 group" style="padding-left: {{ $level * 12 }}px">
        <a href="{{ route('shop.catalog', array_merge(request()->except('page'), ['category' => $category->slug])) }}" 
           class="text-sm flex-1 py-1.5 px-3 rounded-lg transition-all duration-200 {{ $isActive ? 'bg-primary/10 font-bold text-primary shadow-sm border border-primary/20 scale-105 ml-1' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground' }}">
            {{ $category->name }}
        </a>
        
        @if($hasChildren)
            <button @click.prevent="open = !open" class="p-1 hover:bg-muted rounded-full transition-colors text-muted-foreground">
                <svg class="w-3 h-3 transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
        @endif
    </div>

    @if($hasChildren)
        <div x-show="open" x-cloak class="flex flex-col border-l-2 ml-4 border-primary/10 bg-muted/5 rounded-r-lg overflow-hidden transition-all duration-300">
            @foreach($category->children as $child)
                @include('shop.partials.category-item', ['category' => $child, 'level' => $level + 1, 'expandedSlugs' => $expandedSlugs])
            @endforeach
        </div>
    @endif
</div>