---
import { getCollection, getEntry } from "astro:content";
import NewsCard from "../cards/NewsCard.astro";
import Button from "../ui/Button.astro";
const { props } = Astro.props;
const currentLocale = Astro.currentLocale;

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

import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
---
<div id="news" class="bg-[#22523F] py-12 lg:py-20">
    <div class="container mx-auto">
    <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
        <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">{tl("news.title")}</h4>
    <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.text2")}</p>
    <Button class="px-6 py-3 uppercase mt-4" url=`/${currentLocale}/news` variant="primary" title={tl("news.buttonLable")} />
    </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()
        )
        .slice(0,6)
        .map((item) => (
        <NewsCard data={item} />
        ))
    }
    </div>
    </div>
</div>