import type { Metadata } from "next";
import { Suspense } from "react";
import { MapPage } from "@/components/map/map-page";
import { Skeleton } from "@/components/ui/skeleton";

export const metadata: Metadata = {
  title: "Global data center map",
  description: "Every indexed data center on one map — filter by status, type, operator, country, capacity and opening year; cluster by market.",
  alternates: { canonical: "/map" },
};

export default function Page() {
  return (
    <Suspense fallback={<Skeleton className="h-full w-full rounded-none" />}>
      <MapPage />
    </Suspense>
  );
}