"use client";

import { useEffect } from "react";

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

    return (
        <div className="flex h-[100dvh] flex-col items-center justify-center gap-4 p-8">
            <div className="rounded-2xl border border-border/70 bg-muted/40 p-4">
                <span className="text-4xl">⚠️</span>
            </div>
            <div className="space-y-1 text-center">
                <h2 className="text-lg font-semibold text-foreground">出了点问题</h2>
                <p className="text-sm text-muted-foreground">
                    应用遇到了一个错误，请尝试刷新页面。
                </p>
            </div>
            <button
                onClick={reset}
                className="rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
            >
                重试
            </button>
        </div>
    );
}
