import { Component, type ReactNode } from "react";

export class ErrorBoundary extends Component<{ children: ReactNode }, { err: Error | null }> {
  state: { err: Error | null } = { err: null };

  static getDerivedStateFromError(err: Error) {
    return { err };
  }

  render() {
    if (this.state.err) {
      return (
        <div className="grid h-full place-items-center p-8 text-center">
          <div>
            <p className="mb-2 text-lg text-red-400">页面出错了</p>
            <p className="mb-4 max-w-md text-sm break-all text-stone-500">{String(this.state.err)}</p>
            <button
              className="rounded-md bg-stone-800 px-3 py-1.5 text-sm"
              onClick={() => this.setState({ err: null })}
            >
              重试
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}