"use client";

import { HomeIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";

/** Shown by the service worker when a navigation can't reach the network. */
export default function OfflinePage() {
  const { t } = useI18n();

  return (
    <main className="frost-bg grid min-h-dvh place-items-center px-4">
      <div className="card relative max-w-sm space-y-3 p-6 text-center">
        <HomeIcon className="mx-auto size-8 text-frost-400" />
        <h1 className="text-xl font-semibold text-frost-950 dark:text-frost-50">{t("offline.title")}</h1>
        <p className="text-sm text-frost-600 dark:text-frost-300">{t("offline.body")}</p>
      </div>
    </main>
  );
}