import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import envelope from '../../assets/img/illustrations/envelope.png';
import { useBrowserQuery } from '../../context/BrowserQuery';
import { useTranslation } from 'react-i18next';

const ConfirmMailContent = ({ layout, titleTag: TitleTag }) => {
  const queryString = useBrowserQuery();
  const { t } = useTranslation('auth');

  const toWording = queryString && queryString.get('email') ? queryString.get('email') : t('confirmEmailContent.toYou');

  return (
    <Fragment>
      <img className="d-block mx-auto mb-4" src={envelope} alt="sent" width={70} />
      <TitleTag>{t('confirmEmailContent.title')}</TitleTag>
      <p>{t('confirmEmailContent.description_1')} {toWording}. {t('confirmEmailContent.description_2')}</p>
      <p>
      {t('confirmEmailContent.description_3')}
      </p>
      <Button tag={Link} color="primary" size="sm" className="mt-3" to={`/auth/login`}>
        <FontAwesomeIcon icon="chevron-left" transform="shrink-4 down-1" className="mr-1" />
        {t('confirmEmailContent.returnToLogin')}
      </Button>
    </Fragment>
  );
};

ConfirmMailContent.propTypes = {
  layout: PropTypes.string,
  titleTag: PropTypes.string
};

ConfirmMailContent.defaultProps = { layout: 'basic', titleTag: 'h4' };

export default ConfirmMailContent;
