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

const Index = ({ onChange, onConfirm, disabled }) => {
  return (
    <Modal>
      <h2 className={styles['modal-title']}>Select Your Seats</h2>
      <p className={styles['modal-title']}>
        Please choose how many seats you'd like to book.
      </p>
      <Input
        label={'Number of Seats'}
        placeholder="Enter number of seats"
        type="number"
        max="10"
        min="1"
        onChange={(e) => onChange(e.target.value)}
      />
      <div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
        <Button size={'md'} onClick={onConfirm} disabled={disabled}>
          Confirm
        </Button>
      </div>
    </Modal>
  );
};

export default Index;
Index.propTypes = {
  onChange: PropTypes.func.isRequired,
  onConfirm: PropTypes.func.isRequired,
  disabled: PropTypes.bool
};
