---
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>
