@props(['folder', 'selectedFolderId', 'expandedFolders', 'level' => 0])

<li class="pl-{{ $level * 2 }}">
    <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100 {{ $folder->id == $selectedFolderId ? 'bg-blue-50 border border-blue-200' : '' }}">
        <div class="flex items-center flex-1" wire:click="selectFolder({{ $folder->id }})">
            <button wire:click.prevent="toggleFolder({{ $folder->id }})" class="mr-2">
                @if(in_array($folder->id, $expandedFolders))
                    <x-icons icon="chevron-down" class="w-4 h-4 text-gray-400" />
                @else
                    <x-icons icon="chevron-right" class="w-4 h-4 text-gray-400" />
                @endif
            </button>
            <x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />
            <span class="cursor-pointer">{{ $folder->name }}</span>
        </div>
        <span class="text-sm text-gray-500">
            {{ $folder->documents_count }}
        </span>
    </div>

    @if(in_array($folder->id, $expandedFolders))
        <ul class="mt-2 space-y-2">
            @foreach($folder->children as $child)
                <x-folder-item 
                    :folder="$child" 
                    :selectedFolderId="$selectedFolderId"
                    :expandedFolders="$expandedFolders"
                    :level="$level + 1"
                    wire:key="folder-{{ $child->id }}"
                />
            @endforeach
        </ul>
    @endif
</li>