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

import Button from '@material-hu/components/design-system/Buttons/Button';

import { OTP_SUPPORT_LINK } from 'src/constants/login';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Error from './Error';

const PhoneNotUpdated = () => {
  const { t } = useLokaliseTranslation('authentication');

  return (
    <Error.Container>
      <Error.CardContainer>
        <Error.Title
          title={t('PHONE_NOT_UPDATED.TITLE')}
          description={t('PHONE_NOT_UPDATED.DESCRIPTION')}
        />
      </Error.CardContainer>
      <Error.Actions>
        <Button
          variant="primary"
          size="large"
          component={Link}
          href={OTP_SUPPORT_LINK}
          target="_blank"
        >
          {t('PHONE_NOT_UPDATED.BUTTON')}
        </Button>
      </Error.Actions>
    </Error.Container>
  );
};

export default PhoneNotUpdated;