{"size": 1116, "ext": "js", "max_stars_repo_path": "src/Components/ItemCount.js", "max_stars_repo_name": "rdojeda/shop-ojeda", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Components/ItemCount.js", "max_issues_repo_name": "rdojeda/shop-ojeda", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/ItemCount.js", "max_forks_repo_name": "rdojeda/shop-ojeda", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.2608695652, "max_line_length": 78, "alphanum_fraction": 0.4946236559}
import { useState } from "react";

export const ItemCount = ({ stock, initial }) => {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
     if(count < stock) { setCount(count + 1) }
    
  };

  function handleSubstract() {
      if (count > initial) {setCount(count -1) }
  }

  return (
    <>
      <div className="container mt-5 mb-5">
        <h5 className="text-center">
          Stock {stock} - Clicks {count}
        </h5>
        <div className="d-grid gap-2 d-md-flex justify-content-md-center">
          <button
            className="btn btn-primary me-md-2"
            type="button"
            onClick={handleSubstract}
          >
            -
          </button>
          <button
            className="btn btn-success"
            type="button"
            onClick={handleAdd}
          >
            +
          </button>
        </div>
        <div className="-grid gap-2 d-md-flex justify-content-md-center mt-2">
          <button className="btn btn-primary" type="button">
            Agregar al Carrito
          </button>
        </div>
      </div>
    </>
  );
};
