import React from 'react';

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('ERROR BOUNDARY CAUGHT:', error);
    console.error('ERROR BOUNDARY STACK:', errorInfo);
    
    // Check if this is the specific object rendering error
    if (error.message && error.message.includes('Objects are not valid as a React child')) {
      console.error('🚨 FOUND THE OBJECT RENDERING ERROR!');
      console.error('Error message:', error.message);
      console.error('Stack trace:', error.stack);
      console.error('Component stack:', errorInfo.componentStack);
    }
    
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '20px', border: '2px solid red', margin: '10px' }}>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;