import { Alert } from '@chakra-ui/react'
import React from 'react'
import { useTranslation } from 'react-i18next'

// Компонент-обертка для использования хука useTranslation внутри классового компонента
const ErrorMessage = ({ error }: { error: string | null }) => {
  const { t } = useTranslation()
  
  return (
    <Alert status="error" title={t('journal.pl.common.error')}>
      {t('journal.pl.common.error.something')}<br />
      {error && <span>{error}</span>}
    </Alert>
  )
}

export class ErrorBoundary extends React.Component<
  React.PropsWithChildren,
  { hasError: boolean, error?: string }
> {
  state = { hasError: false, error: null }

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

  render() {
    if (this.state.hasError) {
      return <ErrorMessage error={this.state.error} />
    }

    return this.props.children
  }
}