// src/components/ErrorBoundary.tsx

import { Button, Result } from "antd";
import { useEffect, useState } from "react";

export default function ErrorBoundary({
  children,
  fallback,
}: {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}) {
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const handleError = () => setHasError(true);
    window.addEventListener("error", handleError);
    return () => window.removeEventListener("error", handleError);
  }, []);

  if (hasError) {
    return (
      fallback || (
        <Result
          status="500"
          title="Something went wrong"
          subTitle="Please try again later"
          extra={
            <Button type="primary">
              Refresh
            </Button>
          }
        />
      )
    );
  }

  return children;
}
