'use client'

import React, { ReactNode } from "react";
import { EmplyPlaceHolder, EmptyContent, EmptyIcon, EmptyTitle } from "./EmplyPlaceHolder";

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode; // Se acepta un elemento HTML como fallback
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    // Actualiza el estado para que la siguiente renderización muestre el mensaje de error
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // También puedes registrar el error en un servicio de reporte de errores
    console.error("Error capturado por Error Boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Si hay un fallback proporcionado, renderizarlo; de lo contrario, usar el diseño por defecto
      return this.props.fallback ? (
        this.props.fallback
      ) : (
        <EmplyPlaceHolder>
          <EmptyIcon iconName="error" />
          <EmptyTitle className="text-base">Ocurrió un error</EmptyTitle>
          <EmptyContent className="text-xs">
            Por favor, revisa tu conexión a internet o intenta más tarde.
          </EmptyContent>
        </EmplyPlaceHolder>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;