---
export const prerender = true

import { Separator } from "../../../components/ui/separator";
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();

const og = {
  basic: {
    title: page.data.title,
    type: "article",
    image: page.data.image.url
  },
  article: {
    publishedTime: page.data.publishDate,
    authors: [page.data.author],
    tags: page.data.tags
  }
}
---

<BlogPost {...page.data} language={lang} openGraph={og}>
  <article
    class="prose prose-moi m-[auto] sm:prose-sm md:prose-md lg:prose-lg text-justify"
  >
    <div class="text-center">
      <!--<img src={page.data.image.url} alt={page.data.image.alt} class="rounded-lg max-h-[25vh] m-auto"> -->
      <h1 class="lg:text-4xl text-2xl">{page.data.title}</h1>
      <p>{page.data.author} • {formattedDate}</p>
      <div class="flex justify-center">
        { page.data.tags?.map((tag) => 
          <a href={`${Astro.url.origin}/${Astro.currentLocale}/blog/tags/${tag}`}>#{tag}</a><span class="ml-2"></span>
        )}
      </div>
      { // @ts-ignore }
      <Separator className="my-4"/>
    </div>
    <div class="text-left p-3">
      <Content />
    </div>
  </article>
</BlogPost>
