'use client';
import { useEffect } from 'react';
import { t } from '@/i18n';

export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error(error);
  }, [error]);
  return (
    <div className="mx-auto max-w-prose py-20 text-center">
      <div className="eyebrow">{t('site.name')}</div>
      <h1 className="display mt-2 text-3xl text-ink">{t('common.errorTitle')}</h1>
      <p className="mt-3 text-ink-2">{t('common.errorHint')}</p>
      {error.digest ? <p className="tnum mt-2 text-2xs text-ink-3">{error.digest}</p> : null}
      <button type="button" onClick={reset} className="mt-6 inline-flex h-10 items-center rounded-sm bg-ink px-4 text-sm font-medium text-paper hover:bg-accent hover:text-accent-ink">
        {t('common.retry')}
      </button>
    </div>
  );
}