import { FC, PropsWithChildren } from 'react';

import { ErrorBoundary } from '@sentry/react';

import Typography from '@material-hu/mui/Typography';

import { useMobile } from 'src/contexts/MobileContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

const CustomErrorBoundary: FC<PropsWithChildren<{}>> = ({ children }) => {
  const { t } = useLokaliseTranslation('banbajio');
  const { isMobile } = useMobile();

  if (!isMobile) {
    return <>{children}</>;
  }
  return (
    <ErrorBoundary
      fallback={
        <Typography
          sx={{ display: 'block', textAlign: 'center', mt: 3 }}
          variant="globalL"
        >
          {t('UNEXPECTED_ERROR')}
        </Typography>
      }
    >
      {children}
    </ErrorBoundary>
  );
};

export default CustomErrorBoundary;