@props([
    'category' => null,
    'mainTitle' => null,
    'subTitle' => null,
    'contentGridCols' => 2,
    'data' => [],
])
<div class="bg-white border-primary-600 p-3 relative border rounded-lg shadow">
    @if (is_string($category))
    <div class="bg-vivid-100 text-vivid-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 my-2 rounded-md">
        {{ $category }}
    </div>
    @else
        {{ $category }}
    @endif
    @isset($mainTitle)
        <div class="text-gray-900 text-xl font-extrabold">
            {{ $mainTitle }}
        </div>
        @endisset
    @isset($subTitle)
        <div class="text-md font-normal text-gray-500 mb-2">
            {{ $subTitle }}
        </div>
    @endisset
        {{ $slot }}
    <div class="px-2 w-full sm:inline-grid sm:grid-cols-{{$contentGridCols - 2}} md:grid-cols-{{$contentGridCols - 1}} lg:grid-cols-{{$contentGridCols}}">
        @foreach($data as $key => $value)
            <x-cards.label-value :key="$key" :value="$value" />
        @endforeach
    </div>
    {{ $footer ?? ''}}
</div>