import React, { useState } from "react";
import style from "./Styles.module.css";
import { Button } from "../../Form/Button/Button";
import { Input } from "../../Form/form/Input";
import { Header } from "../../Layout/Card//Header";
import { toast } from "react-toastify";

const Counter = ({ onSubmit, className, onChange }) => {
  const [count, setCount] = useState(0);
  console.log(onSubmit);
  const Num = (e) => {
    const value = Number(e.target.value);
    console.log("number", value);
    setCount(value);
    if (onChange) {
      onChange({ limit: value });
    }
  };

  const Submit = () => {
    const number = parseInt(count, 10);
    if (number > 0) {
      alert(`Selected Seats,${count}`);
      onSubmit?.(number);
    } else if (number === 0) {
      toast.info("Please select seat");
    } else {
      toast.info("no seats selected");
    }
  };

  return (
    <>
      <div className={style.container}>
        <Header
          title={`You have selected ${count} seats.`}
          Color="#000"
          className={style.hd}
        />
        <div className={style.block}>
          <Input
            placeholder="Select the required seats"
            type="number"
            value={count}
            onChange={Num}
            min="0"
            disabled={count >= 60}
          />
        </div>

        <div className={style.submitbtn}>
          <Button
            children="Submit"
            onClick={Submit}
            className={`${style.submit} ${className}`}
          />
        </div>
      </div>
    </>
  );
};

export default Counter;
