---
import Description from "~/components/Description.astro"
import ModsList from "~/components/ModsList"
import { CONSTANT } from "~/constants"
import Layout from "~/layouts/Layout.astro"
import { getAllMods } from "~/mods"
import { getLocale, getUI } from "~/utils/i18n"
export { getStaticPaths } from "~/utils/i18n"

const locale = getLocale(Astro)

const {
  routes: { mods },
  layout,
} = getUI(locale)

const allMods = (await getAllMods()) || []
---

<Layout title={layout.mods.title}>
  <main class="container mt-32 flex flex-col gap-10 2xl:mt-32">
    <header class="flex w-full flex-col gap-8 border-dark">
      <Description class="text-6xl font-bold">{mods.title}</Description>
      <Description class="max-w-3xl">
        {mods.description}
      </Description>
    </header>

    <!-- Importing ModList component -->
    <ModsList allMods={allMods} locale={locale ?? CONSTANT.I18N.DEFAULT_LOCALE} client:load />
  </main>
</Layout>