"use client";

import { useEffect } from "react";
import Link from "next/link";
import { Button } from "@/components/ui";
import { useI18n } from "@/i18n/i18n-provider";

export default function AdminError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const { t } = useI18n();

  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="py-20 text-center">
      <p className="tracking-wide-caps text-xs text-honey-dark mb-3">{t.errorPage.eyebrow}</p>
      <h1 className="text-2xl text-forest">{t.errorPage.title}</h1>
      <p className="mt-3 text-ink/70">{t.errorPage.description}</p>
      <div className="mt-6 flex items-center justify-center gap-4">
        <Button type="button" onClick={() => reset()}>
          {t.errorPage.retry}
        </Button>
        <Link href="/admin" className="text-sm text-forest underline">
          {t.adminVouchersPage.backToDashboard}
        </Link>
      </div>
    </div>
  );
}