---
import LinkCard from "~/components/astro/link-card.astro"
import { en, zh } from "~/config"
import LinksContentEn from "~/config/en/links.mdx"
import { links } from "~/config/links"
import LinksContentZh from "~/config/zh/links.mdx"
import { getLangFromUrl, useTranslations } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
import { getLanguagePaths } from "~/utils/langs"

export function getStaticPaths() {
  return getLanguagePaths()
}

const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
const LinksContent = lang === "zh" ? LinksContentZh : LinksContentEn
const pageMeta = lang === "zh" ? zh.pageMeta : en.pageMeta
---

<MainLayout
  title={pageMeta.links.title}
  description={pageMeta.links.description}
  ogImage={pageMeta.links.ogImage}
  needComment={true}
>
  <h3 class="my-10 text-center text-xl font-bold">{t("links.title")}</h3>

  <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
    {links.map((link) => <LinkCard {...link} />)}
  </div>
  <div class="prose max-w-3xl dark:prose-invert">
    <LinksContent />
  </div>
</MainLayout>
