---
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";

// 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.slug },
            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.slug + ".png"}
>
    <TopLayout>
        <div class="animate">
            <ArticleTopLayout entry={project} />
        </div>
    </TopLayout>
    <BottomLayout>
        <div class="animate">
            <ArticleBottomLayout entry={project} />
        </div>
    </BottomLayout>
</PageLayout>