{"size": 1270, "ext": "js", "max_stars_repo_path": "gatsby-theme-cart/src/cart-item.js", "max_stars_repo_name": "notrab/gatsby-theme-cart", "max_stars_repo_stars_event_min_datetime": "2019-11-07T09:24:43.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-21T17:46:15.000Z", "max_issues_repo_path": "gatsby-theme-cart/src/cart-item.js", "max_issues_repo_name": "notrab/gatsby-theme-cart", "max_issues_repo_issues_event_min_datetime": "2019-11-07T21:28:04.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-05T13:04:36.000Z", "max_forks_repo_path": "gatsby-theme-cart/src/cart-item.js", "max_forks_repo_name": "notrab/gatsby-theme-cart", "max_forks_repo_forks_event_min_datetime": "2020-06-21T17:47:02.000Z", "max_forks_repo_forks_event_max_datetime": "2020-06-21T17:47:02.000Z"}
{"max_stars_count": 2, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 25.9183673469, "max_line_length": 78, "alphanum_fraction": 0.5653543307}
import React from 'react'
import { useCart } from 'react-use-cart'

function CartItem({ id, name, description, quantity }) {
  const { updateItemQuantity, removeItem } = useCart()

  const increment = () => updateItemQuantity(id, quantity + 1)
  const decrement = () => updateItemQuantity(id, quantity - 1)
  const remove = () => removeItem(id)

  return (
    <div key={id} className="cart-list-item">
      <div className="cart-list-item--name">
        {name}
        {description}
      </div>

      <div className="cart-list-item--quantity">
        <div className="cart-item-quantity--wrapper">
          <button
            onClick={decrement}
            className="cart-list-item-button cart-list-item-button--decrement"
          >
            -
          </button>

          <span className="cart-item-quantity--amount">{quantity}</span>

          <button
            onClick={increment}
            className="cart-list-item-button cart-list-item-button--increment"
          >
            +
          </button>
        </div>

        <button
          onClick={remove}
          className="cart-list-item-button cart-list-item-button--remove-item"
        >
          Remove item
        </button>
      </div>
    </div>
  )
}

export default CartItem
