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

<div
    class="relative flex w-full snap-x snap-mandatory gap-4.5 overflow-x-auto overscroll-contain no-scrollbar max-w-max">
    @php
        $displayedCategories = [];
        $currentPath = request()->path();
        $segments = explode('/', $currentPath);
        $slug = end($segments);
        $ubicacion = empty($slug) ? env('APP_PAIS') : $slug;
    @endphp
    @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('ubicacionDestacados', ['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">
                {{ $event['name'] }}
            </a>
            {{-- @endif --}}
        @endif
    @endforeach
</div>

{{-- x-data="{
    isDragging: false,
    startX: 0,
    scrollLeft: 0,
    handleMouseDown(e) {
        if (e.target.tagName === 'IMG') {
            e.preventDefault();
            return;
        }
        this.isDragging = true;
        this.startX = e.pageX - this.$el.offsetLeft;
        this.scrollLeft = this.$el.scrollLeft;
    }
}" x-on:mousedown="handleMouseDown" x-on:mouseleave="isDragging = false"
    x-on:mouseup="isDragging = false"
    x-on:mousemove="if (isDragging) {
        $event.preventDefault();
        const x = $event.pageX - $el.offsetLeft;
        const walk = (x - startX);
        $el.scrollLeft = scrollLeft - walk;
    }" --}}