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

import { useLokaliseTranslation } from 'src/utils/i18n';

type RequestOfferErrorStateProps = {
  onRetry: () => void;
};

const RequestOfferErrorState = ({ onRetry }: RequestOfferErrorStateProps) => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Stack
      sx={{
        alignItems: 'center',
        width: '100%',
        gap: 2,
        py: 4,
        textAlign: 'center',
      }}
    >
      <Typography
        variant="globalL"
        sx={{ fontWeight: 'fontWeightBold' }}
      >
        {t('errors.load_offer_title')}
      </Typography>
      <Typography
        variant="globalM"
        sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
      >
        {t('errors.load_offer_message')}
      </Typography>
      <Button
        variant="contained"
        color="primary"
        onClick={onRetry}
      >
        {t('status.error_retry')}
      </Button>
    </Stack>
  );
};

export default RequestOfferErrorState;