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

const Modal = ({ onConfirm, onChange, variant, onOfSeats, onCancel }) => {
  return (
    <div className={styles["overlay-container"]}>
      <div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
        {variant == "input" && (
          <>
            <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"]} ${styles["flex-direction"]}`}>
              <Button size={"sm"} onClick={onConfirm}>
                Confirm
              </Button>
            </div>
          </>
        )}
        {variant == "confirm" && (
          <>
            <h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
            {/* <p>
              You have selected <strong>{onOfSeats}</strong> seat
              {onOfSeats !== 1 ? "s" : ""}.
            </p> */}
            <p>Please confirm to proceed with your booking.</p>
            <div className={styles["btn-wrapper"]}>
              {/* <Button size={"sm"} onClick={onCancel}>
                Cancel
              </Button> */}
              <Button size={"sm"} onClick={onConfirm}>
                Confirm
              </Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Modal;
