{{--
    Browse section-switcher pills.

    Expected variable: $section (string) — one of: artworks, photography, wallpapers, skins, other
--}}

@php
    $active = $section ?? 'artworks';
    $includeTags = (bool) ($includeTags ?? false);
    $contentTypes = collect($contentTypes ?? $mainCategories ?? []);
    $iconMap = [
        'photography' => 'fa-camera',
        'wallpapers' => 'fa-desktop',
        'skins' => 'fa-layer-group',
        'digital-art' => 'fa-palette',
        'other' => 'fa-folder-open',
    ];

    $sections = collect([
        'artworks' => ['label' => 'All Artworks', 'icon' => 'fa-border-all', 'href' => '/browse'],
    ])->merge(
        $contentTypes->mapWithKeys(function ($type) use ($iconMap) {
            $slug = strtolower((string) ($type->slug ?? ''));

            return [$slug => [
                'label' => $type->name,
                'icon' => $iconMap[$slug] ?? 'fa-folder-open',
                'href' => $type->url ?? ('/' . $slug),
            ]];
        })
    );

    if ($includeTags) {
        $sections->put('tags', ['label' => 'Tags', 'icon' => 'fa-tags', 'href' => '/tags']);
    }
@endphp

<nav class="flex flex-wrap items-center gap-2 text-sm" aria-label="Browse sections">
    @foreach($sections as $slug => $meta)
        <a href="{{ $meta['href'] }}"
           @if($active === $slug) aria-current="page" @endif
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
                  {{ $active === $slug
                        ? 'bg-sky-600 text-white'
                        : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}">
            <i class="fa-solid {{ $meta['icon'] }} text-xs"></i>
            {{ $meta['label'] }}
        </a>
    @endforeach
</nav>