---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import ProjectPreview from '../../components/ProjectPreview.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { sortItemsByDateDesc } from '../../utils/data-utils';

export async function getStaticPaths() {
    const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
    const projectCount = projects.length;
    return projects.map((project, index) => ({
        params: { id: project.id },
        props: {
            project,
            prevProject: index + 1 !== projectCount ? projects[index + 1] : null,
            nextProject: index !== 0 ? projects[index - 1] : null
        }
    }));
}

type Props = {
    project: CollectionEntry<'projects'>;
    prevProject: CollectionEntry<'projects'>;
    nextProject: CollectionEntry<'projects'>;
};

const { project, prevProject, nextProject } = Astro.props;
const { title, description, seo } = project.data;
const { Content } = await render(project);
---

<BaseLayout title={seo?.title ?? title} description={seo?.description ?? description} image={seo?.image} pageType="article" showHeader={false}>
    <article class="mb-16 sm:mb-24">
        <header class="mb-8">
            <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{title}</h1>
        </header>
        <div class="max-w-none prose sm:prose-lg">
            <Content />
        </div>
    </article>
    {
        (prevProject || nextProject) && (
            <div class="my-16 sm:my-24">
                <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">View Next</h2>
                {nextProject && <ProjectPreview project={nextProject} class="mb-10 sm:mb-12" headingLevel="h3" />}
                {prevProject && <ProjectPreview project={prevProject} class="mb-10 sm:mb-12" headingLevel="h3" />}
            </div>
        )
    }
</BaseLayout>
