import { getI18n } from "@/lib/i18n";
import { Header, Footer, EmptyState } from "@/components/Shell";
import { catalog } from "@/lib/catalog";
import { CatalogBrowser } from "@/components/CatalogBrowser";
export const dynamic = "force-dynamic";
export default async function Servers() {
  const { t } = await getI18n();
  const maps = await catalog();
  return (
    <>
      <Header />
      <main className="section page-content">
        <span className="eyebrow">
          {t("THE COMMUNITY AT YOUR COORDINATES")}
        </span>
        <h1>{t("Explore the worlds.")}</h1>
        <p className="lead">
          {t(
            "From familiar spawn towns to places nobody’s quite sure about. Pick your next expedition.",
          )}
        </p>
        {maps.length ? (
          <CatalogBrowser maps={maps} />
        ) : (
          <EmptyState title={t("Fresh chunks, fresh start")}>
            {t(
              "No maps have been approved yet. Your server could be the first.",
            )}
          </EmptyState>
        )}
      </main>
      <Footer />
    </>
  );
}