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 maps = await catalog();
  return (
    <>
      <Header />
      <main className="section page-content">
        <span className="eyebrow">THE COMMUNITY AT YOUR COORDINATES</span>
        <h1>Explore the worlds.</h1>
        <p className="lead">
          From familiar spawn towns to places nobody’s quite sure about. Pick
          your next expedition.
        </p>
        {maps.length ? (
          <CatalogBrowser maps={maps} />
        ) : (
          <EmptyState title="Fresh chunks, fresh start">
            No maps have been approved yet. Your server could be the first.
          </EmptyState>
        )}
      </main>
      <Footer />
    </>
  );
}