import { getTranslations } from "next-intl/server";
import { SyncPanel } from "@/components/offline/sync-panel";

/**
 * `/m/sync` (lane L7, Spec §22/§23.4, US-012): connection, last sync, pending changes and uploads
 * with progress, errors/conflicts in plain language (retry / discard), storage usage, reset. The
 * data lives on the device (IndexedDB), so the panel is a client component.
 */
export default async function SyncPage() {
  const t = await getTranslations("offline.sync");
  return (
    <main className="space-y-4 p-4">
      <h1 className="text-[26px]">{t("title")}</h1>
      <SyncPanel />
    </main>
  );
}