// import { useState } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa6';
// npm install react-icons  | Auf der npm Seite mit --save, ist nicht mehr nötig
const InputAmount = (props) => {
  const { amount = 0, max = 100, min = -100 } = props;
  // const [amount, setAmount] = useState(props.amount || 0);

  // EventHandlers ================
  const handleChange = (e) => {
    const inputValue = e.target.value;
    const numericRegExp = new RegExp(/^-?\d*$/); // regular expression for numbers (including optional minus sign)

    if (!numericRegExp.test(inputValue)) return;
    // setAmount(inputValue);
    props.onHandleAmount(inputValue);
  };
  const handleClickDec = (e) => {
    // Guard
    if (amount < min) return;

    props.onHandleAmount(amount - 1);
    // setAmount((prevState) => prevState - 1);
  };

  const handleClickInc = (e) => {
    // Guard
    if (amount > max) return;

    // setAmount((prevState) => prevState + 1);
    props.onHandleAmount(amount + 1);
  };

  return (
    <div className="m-input-amount input-amount">
      <div className="input-group mb-3">
        <span className="input-group-text">
          <button
            className="btn btn-dark button-decrease"
            aria-label="Decrease Amount"
            onClick={handleClickDec}
            disabled={amount <= min}>
            <FaMinus />
          </button>
        </span>
        <input
          type="number"
          name="amount"
          placeholder="0"
          aria-label="Amount"
          value={amount}
          className="form-control input-amount"
          onChange={handleChange}
        />
        <span className="input-group-text">
          <button
            className="btn btn-dark button-increase"
            aria-label="Increase Amount"
            onClick={handleClickInc}
            disabled={amount >= max}>
            <FaPlus />
          </button>
        </span>
      </div>
    </div>
  );
};
export default InputAmount;