@props([
    'totalPopulation' => 1782,
    'totalFarmers' => 302,
    'totalProductiveAges' => 305,
])

<x-group class="w-full bg-tertiary-200 rounded-lg overflow-hidden font-poppins my-6">

    <x-stack
        class="h-full max-md:w-full w-xl bg-tertiary-100 text-white p-6 items-center justify-center flex-shrink-0 py-6 md:py-12"
    >
        <x-text class="font-light text-sm">
            Perkembangan terkini Desa Bilanrengi
        </x-text>
        <x-text class="font-bold text-2xl">
            Statistik Ringkas
        </x-text>
    </x-stack>

    <x-grid
        class="max-md:w-full h-full md:flex-1 md:grid-cols-3"
        x-data="{
            totalPopulation: {{ $totalPopulation }},
            totalFarmers: {{ $totalFarmers }},
            totalProductiveAges: {{ $totalProductiveAges }},
        }"
    >
        <x-stack class="h-full items-center max-md:py-4 justify-center text-center">
            <x-text
                class="font-bold text-2xl text-secondary-100"
                x-text="totalPopulation > 999 ? Math.floor(totalPopulation / 100) * 100 + '+' : totalPopulation"
            />
            <x-text class="font-light text-white">
                Total Penduduk
            </x-text>
        </x-stack>
        <x-stack class="h-full items-center max-md:py-4 justify-center text-center">
            <x-text
                class="font-bold text-2xl text-secondary-100"
                x-text="totalFarmers > 999 ? Math.floor(totalFarmers / 100) * 100 + '+' : totalFarmers"
            />
            <x-text class="font-light text-white">
                Jumlah Petani
            </x-text>
        </x-stack>
        <x-stack class="h-full items-center max-md:py-4 justify-center text-center">
            <x-text
                class="font-bold text-2xl text-secondary-100"
                x-text="Math.floor(totalProductiveAges / totalPopulation * 100) + '%'"
            />
            <x-text class="font-light text-white">
                Usia Produktif
            </x-text>
        </x-stack>
    </x-grid>
</x-group>