@props([
    'data' => [],
])


<x-stack class="w-full gap-6">
    <x-group class="w-full justify-between gap-3">
        <x-stack class="flex-1 gap-0">
            <x-text class="font-bold text-xl font-poppins">
                Berita Terkini
            </x-text>
            <x-text class="font-light text-gray-700">
                Baca berita terkini seputar Desa Bilanrengi.
            </x-text>
        </x-stack>

        <a
            wire:navigate
            href="{{ route('landing.news') }}"
        >
            <x-button class="px-3 py-2">
                <x-slot name="rightSection">
                    <i class="text-lg ph ph-caret-circle-double-right"></i>
                </x-slot>
                Semua Berita
            </x-button>
        </a>
    </x-group>

    <x-grid class="max-w-full md:grid-cols-3 gap-4 max-md:overflow-x-auto max-md:grid-flow-col">
        @foreach ($data as $news)
            <x-news-card
                :title="$news['title']"
                :picture="$news['picture']"
                :description="$news['description']"
                :publishedDate="$news['publishedDate']"
                :slug="$news['slug']"
            />
        @endforeach

    </x-grid>

</x-stack>