@props(['events' => []])

<div
    class="relative flex w-full snap-x snap-mandatory gap-1 md:gap-4.5 p-1 overflow-x-auto overscroll-contain no-scrollbar max-w-max">
    @php
        $displayedCategories = [];
        $currentPath = request()->path();
        $segments = explode('/', $currentPath);
        $slug = end($segments);
        $ubicacion = empty($slug) ? config('app.config.app_pais', 'eventos') : $slug;
    @endphp
    {{-- @dd($events['highlightCategories']['categories']) --}}
    @foreach ($events['highlightCategories']['categories'] as $event)
        {{-- @dd($events['highlightCategories']['categories'][1]['products'][0]) --}}
        @if (count($event['products']) > 0)
            {{-- @dd($event['products'][0]['active']) --}}
            {{-- @if ($event['products'][0]['active'] == true) --}}
            <a href="{{ route('catalogo.categoria', ['ubicacion' => $ubicacion, 'slug' => $event['slug']]) }}"
                class="snap-start shrink-0 scroll-mx-6 btn btn-sm text-subtitle whitespace-nowrap text-neutral-500 bg-white border border-neutral-100 hover:border-primary-200 hover:text-primary-200">
                {{ $event['name'] }}
            </a>
            {{-- @endif --}}
        @endif
    @endforeach
</div>