import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index'
import styles from './styles.module.css';

const Modal = ({onConfirm, onChange}) => {
   return (
      <div className={styles["overlay-container"]}>
         <div className={styles['modal-dialog']} role="dialog" aria-modal="true" >
            <h2 className={styles['modal-title']}>Select Your Seats</h2>
            <p>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']}>
               <Button size={'sm'} onClick={onConfirm}>Confirm</Button>
            </div>
         </div>
      </div>
   )
}

export default Modal;