import React from 'react';
import PropTypes from 'prop-types';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@/mui/components';

function CancelDialog(props) {
  return (
    <Dialog open={props.open} onClose={props.onClose} maxWidth="md">
      <DialogTitle onClose={props.onClose}>Confirm quitting</DialogTitle>
      <DialogContent>{"The changes you've made will be lost. Are you sure you want to quit?"}</DialogContent>
      <DialogActions>
        <Button variant="outlined" color="primary" size="small" onClick={props.onClose}>
          Cancel
        </Button>
        <Button color="primary" size="small" onClick={props.onSubmit}>
          Quit
        </Button>
      </DialogActions>
    </Dialog>
  );
}

CancelDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

export default CancelDialog;
