---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

export async function getStaticPaths() {
    const pages = await getCollection('pages');
    return pages.map((page) => {
        return {
            params: { id: page.id },
            props: { page }
        };
    });
}

type Props = { page: CollectionEntry<'pages'> };

const { page } = Astro.props;
const { title, seo } = page.data;
const { Content } = await render(page);
---

<BaseLayout title={seo?.title ?? title} description={seo?.description} image={seo?.image} 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>
</BaseLayout>
