'use client';

import { DEFAULT_LOCALE, localeFromAcceptLanguage, t } from '@impuestos/i18n';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { useBrowserValue } from '@/lib/browser';

export function OfflineNotice() {
  // This page has no request locale to read, so it takes the browser's own preference.
  const locale = useBrowserValue(
    () => localeFromAcceptLanguage(navigator.language),
    DEFAULT_LOCALE,
  );

  return (
    <Card className="w-full space-y-3">
      <h1 className="text-xl font-semibold tracking-tight">{t(locale, 'offline.title')}</h1>
      <p className="text-sm text-[var(--text-muted)] text-pretty">{t(locale, 'offline.body')}</p>
      <Button type="button" block onClick={() => window.location.reload()}>
        {t(locale, 'common.retry')}
      </Button>
    </Card>
  );
}