---
import PostItem from "@/components/post-item";
import { getLangFromUrl } from "@/i18n/utils";
import Layout from "@/layouts/Layout.astro";
import { sortContentByDate } from "@/utils/sorts";
import { getCollection } from "astro:content";

const pageData = {
    title: "Blog",
    description: "Formato largo sobre pensamientos y otros temas.",
};

const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
const filterEsPosts = allPosts.map((post) => {
    const [lang, ...slug] = post.slug.split("/");

    if (lang === "es")
        return {
            ...post,
            slug: slug.toString(),
        };
    else null;
});
sortContentByDate(filterEsPosts);

const lang = getLangFromUrl(Astro.url);
---

<Layout {...pageData}>
    <section class="prose prose-invert">
        <h1>{pageData.title}</h1>
        <p>{pageData.description}</p>
    </section>
    <ul class="mt-4 flex flex-col gap-4">
        {
            filterEsPosts.map(
                (post) =>
                    post && (
                        <li>
                            <PostItem
                                type="blog"
                                lang={lang}
                                slug={post?.slug}
                                date={post?.data.date!}
                                title={post?.data.title!}
                            />
                        </li>
                    ),
            )
        }
    </ul>
</Layout>