---
export const prerender = true

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

export async function getStaticPaths() {
  const allPosts = await getBlogPosts();
  const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];

  var paths = [];
  
  tags.map((tag) => {
    Object.keys(LANGUAGES).map((lang) => {
      if(tag){
        paths.push({
        params: { lang: lang, tag: tag },
        props: { posts: allPosts },
      });
      }
    });
  });
  
  return paths;
}

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

const { lang, tag } = Astro.params;
const { posts } = Astro.props;

const filteredPosts = posts.filter((post) => post.data.tags?.includes(tag) && post.data.language == Astro.currentLocale);

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

<MainLayout title=`${tag} @ Cyril Šebek` description={"desc"} lang={lang} openGraph={og}>
  <SinglePageBlogMode>
    <h1 class="text-2xl text-center font-bold text-content mb-10 mt-5">{t("postsTagged")} "{tag}"</h1>
    <PostsList filteredPosts={filteredPosts} lang={Astro.currentLocale} />
  </SinglePageBlogMode>
</MainLayout>
