turash/bugulma/frontend/components/ui/ModuleErrorBoundary.tsx

import { Component, ErrorInfo, ReactNode } from 'react';
import { classComponentT as t } from '@/lib/class-component-utils';
import { XCircle } from 'lucide-react';
import Button from '@/components/ui/Button.tsx';

interface Props {
  children?: ReactNode;
  moduleName?: string;
}

interface State {
  hasError: boolean;
}

class ModuleErrorBoundary extends Component<Props, State> {
  // FIX: Replaced constructor with a class property for state initialization. This is a more modern and robust approach in class components and resolves the reported errors regarding `this.state` and `this.props` not being available.
  state: State = { hasError: false };

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(`Error in ${this.props.moduleName || 'component'}:`, error, errorInfo);
  }

  // FIX: Using an arrow function to automatically bind 'this'.
  handleReset = () => {
    this.setState({ hasError: false });
  };

  render() {
    if (this.state.hasError) {
      const moduleName = this.props.moduleName || 'this module';
      return (
        <div className="flex flex-col items-center justify-center h-full bg-muted/50 p-4 text-center rounded-lg border border-dashed border-destructive/50">
          <XCircle className="h-4 h-8 mb-2 text-current text-destructive w-4 w-8" />
          <p className="font-semibold text-destructive">
            {t('moduleErrorBoundary.title', { moduleName })}
          </p>
          <p className="text-sm text-muted-foreground mt-1">{t('moduleErrorBoundary.subtitle')}</p>
          <Button onClick={this.handleReset} variant="outline" size="sm" className="mt-4">
            {t('moduleErrorBoundary.cta')}
          </Button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ModuleErrorBoundary;