import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import styles from './AddEmailAddressDialog.css';
import { t } from 'plugin-api/beta/client/services';

const VerifyEmailAddress = ({ emailAddress, done }) => (
  <div>
    <h4 className={styles.title}>
      {t('talk-plugin-local-auth.add_email.verify.title')}
    </h4>
    <p className={styles.description}>
      {t('talk-plugin-local-auth.add_email.verify.description', emailAddress)}
    </p>
    <div className={styles.actions}>
      <a className={cn(styles.button, styles.proceed)} onClick={done}>
        {t('talk-plugin-local-auth.add_email.done')}
      </a>
    </div>
  </div>
);

VerifyEmailAddress.propTypes = {
  emailAddress: PropTypes.string.isRequired,
  done: PropTypes.func.isRequired,
};

export default VerifyEmailAddress;