@props([
'cards' => [],
'id' => null,
'title' => null,
'description' => null,
'component' => null ,
'includer' => null,
'category' => null,
'icons' => null,
'links' => null,
'columns' => $columns ?? 3,
])

<section class="w-full bg-zinc-50">
    <x-header
        :title="$title"
        :description="$description"
    />

    <div class="grid 
    {{ $columns == 2 ? 'md:grid-cols-2' : ($columns == 3 ? 'md:grid-cols-3' : ($columns == 4 ? 'md:grid-cols-4' : 'md:grid-cols-2')) }} 
    bg-darkcoffee">
        @foreach ($cards as $card)
                <x-dynamic-component
                    :component="$component ?? 'card'" 
                    :card="$card"
                    :id="$card['id'] ?? null"
                    :title="$card['title'] ?? null"
                    :description="$card['description'] ?? null"
                    :icons="$card['icon'] ?? null"
                    :links="$card['link'] ?? null"
                    :alt="$card['alt'] ?? null"
                    :name="$card['name'] ?? null"
                    :category="$category ?? null"
                />
        @endforeach
    </div>
</section>