---
import { type CollectionEntry, getCollection } from "astro:content";
import PageLayout from "@/layouts/PageLayout.astro";
import TopLayout from "@/layouts/TopLayout.astro";
import BottomLayout from "@/layouts/BottomLayout.astro";
import ArticleTopLayout from "@/layouts/ArticleTopLayout.astro";
import ArticleBottomLayout from "@/layouts/ArticleBottomLayout.astro";
import ArticleContent from "@/components/ArticleContent.astro";

// Create the static projects pages
export async function getStaticPaths() {
    const projects = await getCollection("projects");
    return projects
        .filter((project) => !project.data.draft)
        .map((project) => ({
            params: { slug: project.id },
            props: project,
        }));
}

// Get the requested project
type Props = CollectionEntry<"projects">;
const project = Astro.props;
const { title, summary } = project.data;
---

<PageLayout
    title={title}
    description={summary}
    image={"/open-graph/projects/" + project.id + ".png"}
>
    <TopLayout>
        <div class="animate">
            <ArticleTopLayout entry={project} />
        </div>
    </TopLayout>
    <ArticleContent
        entry={project}
        commentsCategory={{ name: "Projects", id: "DIC_kwDOSU8cAc4C8Yng" }}
    />
    <BottomLayout>
        <div class="animate">
            <ArticleBottomLayout entry={project} />
        </div>
    </BottomLayout>
</PageLayout>