"use client"

import { useTranslations } from "next-intl"
import { RefreshCw, WifiOff } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function OfflinePage() {
  const t = useTranslations("pwa")

  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background px-4 text-center">
      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
        <WifiOff className="h-10 w-10 text-muted-foreground" />
      </div>
      <h1 className="text-2xl font-bold">{t("offline")}</h1>
      <p className="max-w-sm text-muted-foreground">{t("offlineDesc")}</p>
      <Button onClick={() => window.location.reload()} className="gap-2">
        <RefreshCw className="h-4 w-4" />
        {t("retry")}
      </Button>
    </div>
  )
}
