@props([
    'data' => [
        [
            'title' => 'APBDes 2019 Pelaksanaan',
            'budgets' => [
                [
                    'title' => 'Pendapatan',
                    'realization' => '1657327899',
                    'max' => '1944356000',
                ],
            ],
        ],
    ],
])

<x-stack
    class="w-full gap-6"
    id="financial-section"
>
    <x-stack class="w-full">
        <x-text class="font-bold font-poppins text-xl">
            Keuangan
        </x-text>
        <x-text class="font-light text-gray-700">
            Ringkasan Transparansi Anggaran Pendapatan dan Belanja Desa Bilanrengi
        </x-text>
    </x-stack>

    <x-grid class="w-full md:grid-cols-3 gap-4">
        @foreach ($data as $item)
            <x-landing.financial.card
                :title="$item['title']"
                :budgets="$item['budgets']"
            />
        @endforeach
    </x-grid>
</x-stack>