'use client'
import { Component, type ReactNode } from'react'

interface Props { children: ReactNode; fallback?: ReactNode }
interface State { hasError: boolean; error?: Error }

export class ErrorBoundary extends Component<Props, State> {
 state: State = { hasError: false }

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

 render() {
 if (this.state.hasError) {
 return this.props.fallback ?? (
 <div className="min-h-screen flex items-center justify-center bg-background">
 <div className="text-center p-8 max-w-sm">
 <div className="inline-flex items-center justify-center w-14 h-14 rounded-sm bg-primary mb-5 shadow-lg">
 <span className="text-white font-bold text-xl">SP</span>
 </div>
 <h1 className="text-xl font-semibold text-foreground mb-2">Ein Fehler ist aufgetreten</h1>
 <p className="text-sm text-muted-foreground mb-4">Bitte laden Sie die Seite neu.</p>
 <button
 onClick={() => window.location.reload()}
 className="px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-[#004A80] transition-colors"
 >
 Seite neu laden
 </button>
 </div>
 </div>
 )
 }
 return this.props.children
 }
}