import PropTypes from 'prop-types';
import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';

const Index = ({ onConfirm, onCancel }) => {
  return (
    <Modal>
      <h2 className={styles['modal-title']}>Confirm Your Selection</h2>
      <p className={styles['modal-title']}>
        Please confirm to proceed with your booking.
      </p>
      <div className={styles['btn-wrapper']}>
        <Button
          style={{ flex: 1 }}
          size="md"
          variant="secondary"
          onClick={onCancel}>
          Cancel
        </Button>
        <Button
          style={{ flex: 1 }}
          size="md"
          variant="primary"
          onClick={onConfirm}>
          Confirm
        </Button>
      </div>
    </Modal>
  );
};

export default Index;
Index.propTypes = {
  onConfirm: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired
};
