import React from "react";
import { useCart } from "cart";

const item = {
  productId: "123",
  name: "Product 1",
  quantity: 1,
  price: 10,
};

function Cart() {
  const {
    addToCart,
    cartItems,
    clearCart,
    decreaseItem,
    toggleCart,
    isCartOpen,
  } = useCart();

  return (
    <div>
      <p>{isCartOpen ? "Open" : "Closed"}</p>
      <button onClick={() => toggleCart()}>Toggle</button>
      <button onClick={() => addToCart(item)}>Add</button>

      <button onClick={() => clearCart()}>Clear</button>
      <button onClick={() => decreaseItem("123", 1)}>Decrease</button>

      <p>{JSON.stringify(cartItems)}</p>
    </div>
  );
}

export default Cart;

import { useCart, withSSR } from "cart";
import React from "react";

const item = {
  productId: "123",
  name: "Product 1",
  quantity: 1,
  price: 10,
};

function MyCart() {
  const cart = withSSR(useCart, (state) => state);

  const handleToggle = () => {
    cart?.toggleCart();
  };

  const itemadd = () => {
    cart?.addToCart(item);
  };

  return (
    <div>
      <p>{cart?.isCartOpen ? "Open" : "Closed"}</p>
      <button onClick={() => handleToggle()}>Toggle</button>
      <button onClick={() => itemadd()}>Add</button>

      <button onClick={() => cart?.clearCart()}>Clear</button>
      <button onClick={() => cart?.decreaseItem("123", 1)}>Decrease</button>

      <p>{JSON.stringify(cart?.cartItems)}</p>
    </div>
  );
}

export default MyCart;