---
export const prerender = false;
import MainLayout from "../../../layouts/MainLayout.astro";
import { getCompositions } from "../../../content/config";
import SinglePageBlogMode from "../../../layouts/SinglePageBlogMode.astro";
import CompositionsList from "../../../components/CompositionsList.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 songs = await getCompositions()
songs = songs.reverse()
---

<MainLayout
  title={t("music")["pageTitle"]}
  description={t("music")["description"]}
  lang={Astro.currentLocale}
>
  <SinglePageBlogMode>
    <div class="p-4">
      <h4 class="mb-2 text-3xl font-semibold leading-none text-foreground">{t("music")["title"]}</h4>
	    <p class="mb-4 text-md leading-none text-foreground">{t("music")["description"]}</p>
      <Separator className="my-4"/>
      <CompositionsList songs={songs}/>
    </div>
  </SinglePageBlogMode>
</MainLayout>