text: import React, { useState, useEffect } from "react";
  import "../styles.css";
  import { API } from "../backend";
  import Base from "./Base";
  import Card from "./Card";
  import Paymentb from "./Paymentb";
  import { loadCart } from "./helper/cartHelper";
  
  const Cart = () => {
    const [products, setProducts] = useState([]);
    const [reload, setReload] = useState(false);
    useEffect(() => {
      setProducts(loadCart());
    }, [reload]);
    const loadAllProducts = (products) => {
      return (
        <div>
          <h2>load products</h2>
          {products.map((product, index) => (
            <Card
              key={index}
              product={product}
              removeFromCart={true}
              addtoCart={false}
              setReload={setReload}
              reload={reload}
            />
          ))}
        </div>
      );
    };
    const loadCheckout = () => {
      return (
        <div>
          <h2>load checkout</h2>
        </div>
      );
    };
    return (
      <Base title="Cart Page">
        <div className="row ">
          <div className="col-6">
            {products.length > 0 ? (
              loadAllProducts(products)
            ) : (
              <h3>No Products Found</h3>
            )}
          </div>
          <div className="col-6">
            <Paymentb products={products} setReload={setReload} />
          </div>
        </div>
      </Base>
    );
  };
  
  export default Cart;
  