"use client";

import { useEffect } from "react";
import { motion } from "framer-motion";
import { RotateCcw, Home } from "lucide-react";
import Button from "@/components/Button";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[ErrorBoundary]", error);
  }, [error]);

  return (
    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6">
      <motion.div
        className="flex flex-col items-center text-center"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
      >
        <motion.img
          src="/error-robot.png"
          alt="错误"
          className="h-28 w-28"
          animate={{ y: [0, -4, 0] }}
          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
        />

        <h1 className="mt-6 text-xl font-bold text-heading">出了点问题</h1>
        <p className="mt-2 max-w-xs text-sm text-muted">
          页面遇到了意外错误，请重试或返回首页
        </p>

        <div className="mt-8 flex gap-3">
          <Button onClick={reset} variant="danger" icon={<RotateCcw size={15} />}>
            重试
          </Button>
          <Button onClick={() => window.location.href = "/"} variant="secondary" icon={<Home size={15} />}>
            首页
          </Button>
        </div>
      </motion.div>
    </div>
  );
}
