---
import { render } from 'astro:content';
import BaseLayout from '../../../layouts/BaseLayout.astro';
import PostLayout from '../../../layouts/PostLayout.astro';
import ObservationCard from '../../../components/ObservationCard';
import { LANGS, useTranslations, type Lang } from '../../../lib/i18n';
import { getPostsByLang, slugOf, estimateReadingMinutes } from '../../../lib/posts';
import { postCardPath } from '../../../lib/social-cards';

export async function getStaticPaths() {
  const pathsByLang = await Promise.all(
    LANGS.map(async (lang) =>
      (await getPostsByLang(lang, { includeDrafts: true })).map((post) => ({ params: { lang, slug: slugOf(post) }, props: { post } })),
    ),
  );
  return pathsByLang.flat();
}

const lang = Astro.params.lang as Lang;
const t = useTranslations(lang);
const { post } = Astro.props;
const { Content } = await render(post);
const readingMinutes = estimateReadingMinutes(post.body ?? '');
---

<BaseLayout
  title={`${post.data.title} — ${t('site.name')}`}
  description={post.data.description}
  lang={lang}
  image={postCardPath(lang, slugOf(post))}
  noindex={post.data.draft}
>
  <PostLayout post={post} lang={lang} readingMinutes={readingMinutes}>
    <Content components={{ ObservationCard }} />
  </PostLayout>
</BaseLayout>