text: import React from "react";
  import { useStateValue } from "../StateProvider"
  import "./styles/CheckoutProduct.css";
  
  function CheckoutProduct({ id, image, title, price, rating, hideButton}) {
    const [{ basket }, dispatch] = useStateValue();
  
    const removeFromBasket = () => {
    //remove item from basket
    dispatch({
      type: 'REMOVE_FROM_BASKET',
      id: id,
    })
    }
  
    return (
      <div className="checkoutProduct">
        <img className="checkoutProduct__image" src={image} alt=''/>
        <div className="checkoutProduct__info">
          <p className="checkoutProduct__title">{title}</p>
          <p className="checkoutProduct__price">
            <small>$</small>
            <strong>{price}</strong>
          </p>
          <div className="checkoutProduct__rating">
            {/* the aray takes in the rating number. makes an array of that numer length of 'null' values, then maps through the array and adds a <p> with a star for each rating number */}
            {Array(rating)
              .fill()
              .map((_, i) => (
                <p>⭐️</p>
              ))}
          </div>
          {!hideButton && (
          <button onClick={removeFromBasket}>Remove from Basket</button>
          )}
        </div>
      </div>
    );
  }
  
  export default CheckoutProduct;
  