---
import { render } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { aboutPathOf, getAboutPages, type AboutPage } from '../../lib/about';
import { pageMeta, useTranslations, type Lang } from '../../lib/i18n';
import { pageCardPath } from '../../lib/social-cards';

export async function getStaticPaths() {
  const pages = await getAboutPages();
  // The language switcher and hreflang links need the other language's slug.
  const alternates = Object.fromEntries(pages.map((page) => [page.data.language, `${aboutPathOf(page)}/`]));
  return pages.map((page) => ({
    params: { lang: page.data.language, about: page.data.slug },
    props: { page, alternates },
  }));
}

interface Props {
  page: AboutPage;
  alternates: Record<Lang, string>;
}

const { page: entry, alternates } = Astro.props;
const lang = entry.data.language;
const t = useTranslations(lang);
const page = pageMeta(lang, 'about');
const { Content } = await render(entry);
---

<BaseLayout title={`${page.title} — ${t('site.name')}`} description={page.description} lang={lang} image={pageCardPath(lang, 'about')} alternates={alternates}>
  <section class="mx-10 mt-10 font-mono">
    <h1 class="text-3xl font-bold tracking-tight text-text sm:text-4xl">{page.title}</h1>

    <div class="prose prose-neutral mt-6 max-w-none prose-headings:font-semibold prose-a:text-primary prose-a:no-underline hover:prose-a:underline dark:prose-invert">
      <Content />
    </div>
  </section>
</BaseLayout>