text: import React from "react";
  import "./checkout.css";
  import Subtotal from "./Subtotal";
  import { useStateValue } from "./StateProvider";
  import CheckoutProduct from "./CheckoutProduct";
  
  function Checkout() {
    const [state, dispatch] = useStateValue();
    return (
      <div className="checkout">
        <div className="checkout__left">
          <img
            className="checkout__ad"
            src="https://m.media-amazon.com/images/G/31/AMS/IN/970X250-_desktop_banner.jpg"
            alt="Ad"
          />
  
          <div className="">
            <h3>Hello ,{state.user ? state.user?.email : "Guest"}</h3>
            <h2 className="checkout__title">Your shopping basket</h2>
            {state.basket.map((item) => (
              <CheckoutProduct
                id={item.id}
                image={item.image}
                title={item.title}
                price={item.price}
                rating={item.rating}
              />
            ))}
            {/* checkout Product */}
            {/* checkout Product */}
          </div>
        </div>
  
        <div className="checkout__right">
          <Subtotal />
        </div>
      </div>
    );
  }
  
  export default Checkout;
  