@props(['list_count' => 0])
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-8">
    <x-dashboard.stats-card title="My Listings" :score="$list_count">
        <x-icon-square variant="blue">
            <x-heroicon-o-document-text class="w-8" />
        </x-icon-square>
    </x-dashboard.stats-card>

    <x-dashboard.stats-card title="Total Views" score="12,483">
        <x-icon-square variant="purple">
            <x-heroicon-o-eye class="w-8" />
        </x-icon-square>
    </x-dashboard.stats-card>
    <x-dashboard.stats-card title="Total Likes" score="1,847">
        <x-icon-square variant="pink">
            <x-heroicon-o-heart class="w-8" />
        </x-icon-square>
    </x-dashboard.stats-card>
    <x-dashboard.stats-card title="Total Clicks" score="3,246">
        <x-icon-square variant="green">
            <x-heroicon-o-cursor-arrow-rays class="w-8" />
        </x-icon-square>
    </x-dashboard.stats-card>
</div>