---
import { getCollection } from "astro:content";
import { Image } from "@unpic/astro";
import Button from "../ui/Button.astro";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { createTranslator, getLocalizedRoute } from '../../i18n';

const currentLocale = Astro.currentLocale;
const tl = createTranslator(currentLocale);

const items = await getCollection("editorial", (post)=>{
    return post.data.locale == currentLocale
});

const sorted = [...items]
    .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)
    })
    .slice(0, 6);

dayjs.extend(utc);
dayjs.locale(currentLocale || "es");
---

<div id="editorial" class="bg-[#EBE5D0] py-10 lg:py-14">
    <div class="container mx-auto px-4 md:px-0 max-w-4xl">
        <div class="flex flex-col items-center mb-8">
            <h4 class="text-[#003421] text-2xl uppercase font-bold text-center font-primary">{tl("editorial.title")}</h4>
            <h2 class="text-[#003421] text-3xl md:text-4xl font-bold text-center font-secondary mt-1">{tl("editorial.text")}</h2>
        </div>

        <div class="divide-y divide-[#003421]/10">
            {
                sorted.map((item) => {
                    const date = dayjs.utc(item.data.date).format("D MMMM YYYY");
                    const url = `/${currentLocale}/${getLocalizedRoute("editorial", currentLocale)}/${item.data.slug}`;
                    const thumb = item.data.thumbnail_square || item.data.thumbnail;
                    return (
                        <a href={url} class="flex gap-5 py-5 group hover:bg-[#003421]/5 transition-colors -mx-3 px-3 rounded-sm">
                            <div class="w-20 h-20 md:w-24 md:h-24 shrink-0 overflow-hidden rounded-sm bg-[#003421]/10">
                                {thumb && (
                                    <Image src={thumb} alt={item.data.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                                )}
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm md:text-base font-primary font-semibold text-[#22523F]">Dr. José Benjamín Pérez Matos</p>
                                <p class="text-sm text-[#003421]/50 font-primary mt-0.5">{date}</p>
                                <h3 class="text-base md:text-lg font-secondary font-bold text-[#003421] group-hover:text-[#003421]/60 transition-colors mt-1 leading-snug line-clamp-2">{item.data.title}</h3>
                            </div>
                        </a>
                    )
                })
            }
        </div>

        <div class="flex justify-center mt-8">
            <Button class="px-6 py-2.5 uppercase text-sm" url={`/${currentLocale}/${getLocalizedRoute('editorial', currentLocale)}`} variant="primary" title={tl("editorial.buttonLable")} />
        </div>
    </div>
</div>