{{-- Modern Filter Sidebar Component --}}
@props([
    'availableBrands' => collect(),
    'availableConditions' => collect(),
    'priceRange' => ['min' => 0, 'max' => 10000],
    'activeFilterCount' => 0,
    'selectedBrands' => [],
    'selectedConditions' => [],
    'minPrice' => null,
    'maxPrice' => null,
    'sortBy' => 'featured'
])

<div class="h-full overflow-hidden bg-white dark:bg-zinc-900">
    {{-- Filter Header --}}
    <div class="px-5 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-gradient-to-r from-zinc-50 to-white dark:from-zinc-800/50 dark:to-zinc-900">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                    <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                    </svg>
                </div>
                <div>
                    <h2 class="text-sm font-bold text-zinc-900 dark:text-white">Filters</h2>
                    @if($activeFilterCount > 0)
                        <span class="text-xs text-zinc-500 dark:text-zinc-400">{{ $activeFilterCount }} active</span>
                    @endif
                </div>
            </div>
            @if($activeFilterCount > 0)
                <button
                    wire:click="clearFilters"
                    class="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors"
                >
                    Clear all
                </button>
            @endif
        </div>
    </div>

    {{-- Sort Options --}}
    <x-filter-sort :sortBy="$sortBy" />

    {{-- Filter Sections --}}
    <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
        {{-- Brands Filter --}}
        <x-filter-brands
            :availableBrands="$availableBrands"
            :selectedBrands="$selectedBrands"
        />

        {{-- Condition Filter --}}
        <x-filter-condition
            :availableConditions="$availableConditions"
            :selectedConditions="$selectedConditions"
        />

        {{-- Price Range Filter --}}
        <x-filter-price-range
            :priceRange="$priceRange"
            :minPrice="$minPrice"
            :maxPrice="$maxPrice"
        />
    </div>
</div>