@props(['title','items'=>null,'viewAllUrl'=>null])
<section class="mb-8">
    <x-section-header :title="$title" :viewAllUrl="$viewAllUrl" />

    @if($items && $items->isNotEmpty())
        <div class="-mx-4 overflow-hidden px-4">
            <div class="no-scrollbar -mx-1 overflow-x-auto scroll-smooth py-2">
                <div class="flex snap-x snap-mandatory items-start gap-2 pl-1">
                    @foreach($items as $product)
                        <div class="w-[142px] shrink-0 sm:w-[168px]">
                            <x-product-card :product="$product" />
                        </div>
                    @endforeach
                    <div class="w-1 shrink-0"></div>
                </div>
            </div>
        </div>
    @endif
</section>