@props(['stats' => []])
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 wrapper gap-y-4 gap-x-8">
    <x-dashboard.stats-card title="My Listings" :score="$stats['listings'] ?? 0">
        <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="$stats['views'] ?? 0">
        <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="$stats['likes'] ?? 0">
        <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="$stats['clicks'] ?? 0">
        <x-icon-square variant="green">
            <x-heroicon-o-cursor-arrow-rays class="w-8" />
        </x-icon-square>
    </x-dashboard.stats-card>
</div>