import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error("Error caught in ErrorBoundary:", error, errorInfo);
  }

  // Method to reload the page
  reloadPage = () => {
    window.location.reload();
  };

  render() {
    if (this.state.hasError) {
      // Custom fallback UI with a button to reload the page
      return (
        <div>
          🚫 Error with the iframe content // Invalid Content, either delete or edit the content before we can render it successfully please.
          <p className='text-blue-400'>
            Try refreshing the page if the problem persists. We're sorry for this occurrence; we are aware of the issue and will work to improve your user experience.
          </p>
          {/* Button to reload the page */}
          <button onClick={this.reloadPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Reload Page
          </button>
        </div>
      );
    }

    // Normally, just render children
    return this.props.children;
  }
}

export default ErrorBoundary;