---
import { getCollection } from "astro:content";
import PageLayout from "@/layouts/PageLayout.astro";
import TopLayout from "@/layouts/TopLayout.astro";
import BottomLayout from "@/layouts/BottomLayout.astro";
// import Projects from "@components/Projects";
import { PROJECTS } from "@/consts";

const projects = (await getCollection("projects"))
    .filter((project) => !project.data.draft)
    .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

const tags = [
    ...new Set(projects.flatMap((project) => project.data.tags)),
].sort((a, b) => a.localeCompare(b));
---

<PageLayout title={PROJECTS.TITLE} description={PROJECTS.DESCRIPTION}>
    <TopLayout>
        <div class="animate font-departure page-heading">
            {PROJECTS.TITLE}
        </div>
    </TopLayout>
    <BottomLayout>
        <div class="animate">
            <!-- <Projects client:load tags={tags} data={projects} /> -->
            <div>{JSON.stringify(projects)}</div>
            <div>{JSON.stringify(tags)}</div>
        </div>
    </BottomLayout>
</PageLayout>