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

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

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($products as $product)
            <x-ui.product-card
                :name="$product['name']"
                :price="$product['price'] ?? null"
                :image="$product['image'] ?? null"
                :href="$product['href'] ?? '#'"
            />
        @endforeach
    </div>
</section>