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

export default ({ignoreUser, cancel, username}) => (
  <aside className={cn(styles.root, 'talk-plugin-ignore-user-confirmation')}>
    <div className={styles.message}>
      <h1 className={styles.title}>
        {t('talk-plugin-ignore-user.confirmation_title', username)}
      </h1>
      {t('talk-plugin-ignore-user.confirmation')}
    </div>
    <div className={cn(styles.actions, 'talk-plugin-ignore-user-confirmation-actions')}>
      <button className={cn(styles.cancel, 'talk-plugin-ignore-user-confirmation-cancel')} onClick={cancel}>
        {t('talk-plugin-ignore-user.cancel')}
      </button>
      <button className={cn(styles.button, 'talk-plugin-ignore-user-confirmation-button')} onClick={ignoreUser}>
        {t('talk-plugin-ignore-user.ignore_user')}
      </button>
    </div>
  </aside>
);