import { Component, type ReactNode } from 'react'

interface Props {
  children: ReactNode
}

interface State {
  hasError: boolean
}

// Isolates a single add-on-contributed header item / settings section / page
// so a throwing add-on never blanks the surrounding dashboard.
export default class AddonSlotErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false }

  static getDerivedStateFromError(): State {
    return { hasError: true }
  }

  componentDidCatch( error: Error ) {
    console.error( 'EpicForms: add-on UI failed', error )
  }

  render() {
    if ( this.state.hasError ) {
      return (
        <div className="component-settings__description component-settings__description_error">
          This add-on section could not be displayed.
        </div>
      )
    }

    return this.props.children
  }
}