---
import MainLayout from "@/layouts/MainLayout.astro"
import NewsSection from "@/components/section/NewsSection.astro"
import Header from "@/components/Header.astro"
import NewsCard from "@/components/cards/NewsCard.astro";
import { getCollection, getEntry } from "astro:content";


import { createTranslator, t } from '@/i18n';
const tl = createTranslator(Astro.currentLocale);

const newsItems = await getCollection("news", (post)=>{
    const currentLocale = Astro.currentLocale;
    return post.data.locale == currentLocale
});
---

<MainLayout >
    <div class="top-16 relative mb container mx-auto">
            <Header />
    </div>
    <div class="container mx-auto">
        <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
            <h1 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary md:mt-20 mt-10">{tl("news.title")}</h1>
        <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">{tl("news.text")}</h2>
        <!-- <p class="text-white text-xl text-center">{tl("news.text3")}</p> -->
    </div>
    

        <div class="grid md:grid-cols-2 lg:grid-cols-3 md:gap-10 gap-20">
        {
        [...newsItems]
            .sort((a, b) => 
            new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
            )
            .map((item) => (
            <NewsCard data={item} />
            ))
        }
        </div>
    </div>
</MainLayout>