---
import { getBlogPosts } from "../../../content/config";
import BlogPost from "../../../layouts/BlogPost.astro";

export async function getStaticPaths() {
  const pages = await getBlogPosts();

  const paths = pages.map((page) => {
    return {
      // @ts-ignore
      params: { lang: page?.data.language, slug: page.blog_slug },
      props: page,
    };
  });

  return paths;
}

const { lang } = Astro.params;
const page = Astro.props;
// @ts-ignore
const formattedDate = page.data.publishDate.toLocaleString(lang);

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

<BlogPost {...page.data} language={lang}>
  <article
    class="prose prose-moi m-[auto] sm:prose-sm md:prose-md xl:prose-lg text-justify"
  >
    <div class="text-center">
      <h1 class="lg:text-4xl text-2xl">{page.data.title}</h1>
      <p>{page.data.author} • {formattedDate}</p>
    </div>
    <Content />
  </article>
</BlogPost>