"use client"; // <--- Diese Zeile ist PFLICHT für Error Boundaries!

import React from "react";

// Wir nutzen "export default", damit der Import ohne Klammern funktioniert
export default class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_error: unknown) {
    return { hasError: true };
  }

  componentDidCatch(error: unknown, errorInfo: React.ErrorInfo) {
    console.error("ErrorBoundary caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Still render children to prevent white screen - just log the error
      if (process.env.NODE_ENV === 'development') {
        return (
          <div>
            <div className="p-2 m-2 bg-yellow-50 border border-yellow-200 rounded text-yellow-800 text-xs">
              ⚠️ Error boundary triggered - rendering children anyway
            </div>
            {this.props.children}
          </div>
        );
      }
      // In production, just render children silently
      return this.props.children;
    }

    return this.props.children;
  }
}