import * as React from 'react';
import styles from './Modal.module.scss';
import { Button } from './Button';
import { texts } from '../../texts';

export interface IConfirmDialogProps {
  title: string;
  text: string;
  confirmLabel: string;
  onConfirm: () => void;
  onCancel: () => void;
  busy?: boolean;
}

export const ConfirmDialog: React.FC<IConfirmDialogProps> = ({
  title,
  text,
  confirmLabel,
  onConfirm,
  onCancel,
  busy
}) => (
  <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
    <div className={`${styles.box} ${styles.narrow}`}>
      <div className={styles.title}>{title}</div>
      <p className={styles.text}>{text}</p>
      <div className={styles.narrowFooter}>
        <Button variant="secondary" onClick={onCancel} disabled={busy}>{texts.common.cancel}</Button>
        <Button variant="danger" icon="trash" onClick={onConfirm} disabled={busy}>{confirmLabel}</Button>
      </div>
    </div>
  </div>
);