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

const Index = ({ onChange, onConfirm }) => {
  const [isDisabled, setIsDisabled] = useState(true);

  const handleInputChange = (e) => {
    onChange(e.target.value);
    if (e.target.value) {
      setIsDisabled(false);
    } else {
      setIsDisabled(true);
    }
  };

  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={handleInputChange}
      />
      <div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
        <Button size={'md'} onClick={onConfirm} disabled={isDisabled}>
          Confirm
        </Button>
      </div>
    </Modal>
  );
};

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