import {
  Button,
  Modal,
  ModalBackground,
  ModalCard,
  ModalCardHead,
  ModalCardBody,
  ModalCardFoot,
  ModalCardTitle,
  ModalCardClose,
} from "tights";

const Confirmation: FC<{
  onConfirm(): void;
  onCancel(): void;
  onClose(): void;
}> = ({ onConfirm, onCancel, onClose }) => (
  <Modal>
    <ModalBackground />
    <ModalCard>
      <ModalCardHead>
        <ModalCardTitle>Modal</ModalCardTitle>
        <Delete onClick={onClose} />
      </ModalCardHead>
      <ModalCardBody>...</ModalCardBody>
      <ModalCardFoot>
        <Button onClick={onConfirm}>Confirm</Button>
        <Button onClick={onCancel}>Cancel</Button>
      </ModalCardFoot>
    </ModalCard>
    <ModalClose size="medium" onClick={onClose} />
  </Modal>
);