import { notFound } from "next/navigation";
import Image from "next/image";
import { Header, Footer } from "@/components/Shell";
import { StartGame } from "@/components/StartGame";
import { getMap } from "@/lib/catalog";
export default async function ServerPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  let map;
  try {
    map = await getMap(id);
  } catch {
    notFound();
  }
  return (
    <>
      <Header />
      <main className="section page-content">
        <span className="eyebrow">
          {map.source === "plugin" ? "SERVER EXPORT" : "PLAYER CONTRIBUTION"} ·
          MINECRAFT 1.21.11
        </span>
        <h1>{map.name}</h1>
        <p className="lead">{map.description}</p>
        <div className="detail-grid">
          <div>
            <div className="detail-map">
              <Image
                src={map.mapImage || map.image || ""}
                alt={`${map.name} surface map`}
                width={1024}
                height={1024}
                unoptimized
              />
            </div>
            <div className="card-meta">
              <span>{map.panorama_count} panoramas</span>
              <span>Overworld surface</span>
              <span>
                {map.bounds.maxX - map.bounds.minX} ×{" "}
                {map.bounds.maxZ - map.bounds.minZ} blocks
              </span>
            </div>
          </div>
          <StartGame datasetId={id} />
        </div>
      </main>
      <Footer />
    </>
  );
}