import { getI18n } from "@/lib/i18n";
import { Header, Footer } from "@/components/Shell";
import { catalog } from "@/lib/catalog";
import { CatalogBrowser } from "@/components/CatalogBrowser";
import { user } from "@/lib/supabase";
export const dynamic = "force-dynamic";
export default async function Servers() {
  const { t } = await getI18n();
  const [maps, account] = await Promise.all([catalog(), user()]);
  return (
    <>
      <Header />
      <main className="section page-content" id="main-content" tabIndex={-1}>
        <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>
        <CatalogBrowser maps={maps} signedIn={!!account} />
      </main>
      <Footer />
    </>
  );
}