import { Component, type ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
}

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

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

  componentDidCatch(error: Error) {
    console.error('[SectionErrorBoundary]', error.message, error.stack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? (
        <div className="px-6 py-4 bg-red-50 border border-red-200 rounded-xl my-4 mx-4">
          <p className="text-xs font-mono text-red-600">섹션 렌더링 오류 (콘솔 확인)</p>
        </div>
      );
    }
    return this.props.children;
  }
}