text: import React from "react";
  import "./CheckoutProduct.css";
  import { useStateValue } from "./StateProvider";
  
  // Content for the Checkout Product to be displayed on the Checkout and Order page
  export default function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
      const [{ basket }, dispatch] = useStateValue();
  
      const removeFromBasket = () => {
  
          dispatch({
              type: "REMOVE_FROM_BASKET",
              id: id,
          })
      }
  
      return (
          <div className="checkoutProduct">
              <img className="checkoutProduct__image" src={image} />
  
              <div className="checkoutProduct__info">
                  <p className="checkoutProduct__title">{title}</p>
                  <p className="checkoutProduct__price">
                      <small>$</small>
                      <strong>{price}</strong>
                  </p>
                  <div className="checkoutProduct__rating">
                      {/* Duplicate the number of stars according to the product rating */}
                      {Array(rating)
                      .fill()
                      .map((_, i) => (
                          <p>⭐</p>
                      ))}
                  </div>
                  {!hideButton && (
                      <button onClick={removeFromBasket}>Remove from Basket</button>
                  )}
              </div>
          </div>
      )
  }
  