"use client";

import { useEffect } from "react";
import Link from "next/link";
import { CloudOff, RotateCcw } from "lucide-react";

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

  return (
    <div className="max-w-md mx-auto text-center py-20 sm:py-28">
      <span
        className="inline-flex w-16 h-16 rounded-full items-center justify-center mb-6"
        style={{ background: "var(--clay-soft)", color: "var(--clay)" }}
      >
        <CloudOff size={30} />
      </span>
      <p className="text-[15px] font-extrabold tracking-wide mb-1" style={{ color: "var(--clay)" }}>
        500
      </p>
      <h1 className="text-2xl font-extrabold mb-2" style={{ color: "var(--ink)" }}>
        页面出了点问题
      </h1>
      <p className="text-sm mb-8" style={{ color: "var(--ink-2)" }}>
        可以重试，或先回首页看看其他内容
      </p>
      <div className="flex items-center justify-center gap-3">
        <button onClick={reset} className="btn btn-primary">
          <RotateCcw size={15} /> 重试
        </button>
        <Link href="/" className="btn btn-line">
          返回首页
        </Link>
      </div>
    </div>
  );
}