main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './cointube.jsx'
import './index.css'

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

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

  componentDidCatch(error, errorInfo) {
    console.error("Error atrapado en la App:", error, errorInfo);
    this.setState({ errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
          <div className="bg-red-900/50 p-6 rounded-lg border border-red-500 max-w-2xl w-full">
            <h1 className="text-2xl font-bold mb-4 text-red-300">⚠️ Algo salió mal</h1>
            <p className="mb-4">La aplicación ha encontrado un error crítico.</p>
            <div className="bg-black p-4 rounded overflow-auto text-sm font-mono">
              <p className="text-red-400 font-bold">{this.state.error && this.state.error.toString()}</p>
              <br/>
              <p className="text-gray-500">{this.state.errorInfo && this.state.errorInfo.componentStack}</p>
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>,
)