---
export const prerender = true;

import MainLayout from "../../../layouts/MainLayout.astro";
import { getBlogPosts } from "../../../content/config";
import SinglePageBlogMode from "../../../layouts/SinglePageBlogMode.astro";
import PostsList from "../../../components/PostsList.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
import { Separator } from "../../../components/ui/separator";

const t = useTranslations(getLangFromUrl(Astro.url));

export async function getStaticPaths() {
  return ["en", "fr", "cs", "de"].map((lang) => {
    return { params: { lang } };
  });
}
var posts = await getBlogPosts();
var filtered_posts = posts.filter(
  (post) => post.data.language == Astro.currentLocale,
);

const og = {
  basic: {
    title: t("blog")["title"],
    type: "website",
    image: t("favicon")
  },
  optional: {
    description: t("blog")["ogDescription"],
    locale: getLangFromUrl(Astro.url),
    siteName: "Cyril Šebek"
  }
};
---

<MainLayout
  title={t("blog")["title"]}
  description={t("blog")["ogDescription"]}
  lang={Astro.currentLocale}
  openGraph={og}
>
  <SinglePageBlogMode>
    <div class="p-4">
      <h4 class="mb-2 text-3xl font-semibold leading-none text-foreground">
        {t("blog")["visible"]}
      </h4>
      <p class="mb-4 text-md leading-none text-foreground">
        {t("blog")["description"]}
      </p>
      <Separator className="my-4" />
      <PostsList filteredPosts={filtered_posts.reverse()} lang={Astro.currentLocale} />
    </div>
  </SinglePageBlogMode>
</MainLayout>
