"use client";

import { useEffect } from "react";
import { useTranslations } from "next-intl";
import { Link } from "@/lib/i18n/navigation";
import { RefreshCw, Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import { AnimatedSection } from "@/components/shared/AnimatedSection";

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

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

  return (
    <div className="relative z-10 flex min-h-[70vh] flex-col items-center justify-center px-6 py-24 text-center">
      <AnimatedSection>
        <div className="mb-6 font-mono text-8xl font-bold text-danger/20 select-none">500</div>
        <div className="mb-3 font-mono text-sm text-danger">// {t("error.label")}</div>
        <h1 className="mb-4 text-3xl font-bold text-text-primary md:text-4xl">{t("error.title")}</h1>
        <p className="mb-8 max-w-md text-text-secondary">{t("error.description")}</p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button onClick={reset}>
            <RefreshCw size={15} />
            {t("error.retry")}
          </Button>
          <Button asChild variant="outline">
            <Link href="/">
              <Home size={15} />
              {t("error.home")}
            </Link>
          </Button>
        </div>
        {error.digest && (
          <p className="mt-6 font-mono text-xs text-text-secondary/50">digest: {error.digest}</p>
        )}
      </AnimatedSection>
    </div>
  );
}
