---
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: "Portfolio",
    description: "Revisa mis proyectos.",
};

const allProjects = await getCollection(
    "portfolio",
    ({ data }) => data.draft !== true,
);
const allEsProjects = allProjects.map((project) => {
    const [lang, ...slug] = project.slug.split("/");

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

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">
        {
            allEsProjects.map(
                (project) =>
                    project && (
                        <li>
                            <PostItem
                                lang={lang}
                                type="portfolio"
                                slug={project.slug}
                                date={project.data.date!}
                                title={project.data.title!}
                            />
                        </li>
                    ),
            )
        }
    </ul>
</Layout>