@props([
    'title'    => null,
    'products' => [],
    'cols'     => 4,
])

@php
    $gridCols = match((int) $cols) {
        3 => 'grid-cols-2 md:grid-cols-3',
        2 => 'grid-cols-1 md:grid-cols-2',
        default => 'grid-cols-2 md:grid-cols-4',
    };
@endphp

<section {{ $attributes }}>
    @if($title)
        <h2 class="font-display font-extrabold text-h2 mb-10">{{ $title }}</h2>
    @endif

    <div class="grid {{ $gridCols }} gap-9">
        @foreach($products as $product)
            <x-ui.product-card
                :name="$product['name']"
                :price="$product['price'] ?? null"
                :image="$product['image'] ?? null"
                :href="$product['href'] ?? '#'"
                :variant-id="$product['variantId'] ?? null"
                :has-custom-fields="$product['hasCustomFields'] ?? false"
                :sold-out="$product['soldOut'] ?? false"
            />
        @endforeach
    </div>
</section>