import { Suspense } from "react";
import type { Metadata } from "next";
import { api } from "@/lib/api";
import type { Destination } from "@/lib/types";
import CompareClient from "@/components/CompareClient";
import SiteShell from "@/components/SiteShell";

export const metadata: Metadata = {
  title: "城市对比 · nomadro",
  description: "并排对比旅居城市费用、网速、气候与评分，决定后写入旅居计划",
};

export const revalidate = 60;

export default async function ComparePage() {
  let destinations: Destination[] = [];
  try {
    destinations = await api.getDestinations();
  } catch {
    destinations = [];
  }

  return (
    <SiteShell showFooter>
      <Suspense fallback={<div className="compare-page"><div className="container"><p className="plan-loading">加载对比台…</p></div></div>}>
        <CompareClient destinations={destinations} />
      </Suspense>
    </SiteShell>
  );
}