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

// One renderer for every legal page. getStaticPaths emits exactly the slugs in
// the `legal` collection (cookies.md → /cookies, privacy.md → /privacy, …), so
// this top-level dynamic route never catches anything else.
export const getStaticPaths = (async () => {
  const pages = await getCollection('legal');
  return pages.map((page) => ({
    params: { legal: page.id },
    props: { page },
  }));
}) satisfies GetStaticPaths;

const { page } = Astro.props;
const { Content } = await render(page);

const dateFmt = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
---

<BaseLayout title={page.data.title} description={page.data.description}>
  <article class="prose">
    <h1>{page.data.title}</h1>
    <p class="muted">Last updated: {dateFmt.format(page.data.updated)}</p>
    <Content />
  </article>
</BaseLayout>
