---
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 FooterSection from "@/components/section/FooterSection.astro";
import NewsList from "@/components/cards/NewsList.astro";


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

export function getStaticPaths() {
    const locales = Object.keys(routeTranslations.news);
    return locales.map((locale) => ({
        params: { 
            news_slug: getLocalizedRoute('news', locale) 
        },
    }));
}

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 mt-4">
        <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="flex flex-col md:gap-8 gap-2 lg:max-w-4xl mx-auto bg-white p-8">
        {
            [...newsItems]
                .sort((a, b) => {
                const dateDiff =
                    new Date(b.data.date).getTime() - new Date(a.data.date).getTime()

                if (dateDiff !== 0) return dateDiff

                return (a.data.order ?? 0) - (b.data.order ?? 0)
                })
                .map((item) => (
                <NewsList data={item} />
                ))
            }
        </div>
    </div>
    <FooterSection />

</MainLayout>