1  import { Bounce, toast } from 'react-toastify';
 2  
 3  export default function Cart({ cart, setCart }) {
 4  
 5      const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
 6  
 7      function handleCheckout() {
 8          setCart([]);
 9          toast.success('Checked out!', {
10              position: "top-right",
11              autoClose: 3000,
12              hideProgressBar: false,
13              closeOnClick: true,
14              pauseOnHover: true,
15              draggable: true,
16              progress: undefined,
17              theme: "light",
18              transition: Bounce,
19          });
20      }
21  
22      function removeProduct(product) {
23          const newCart = cart.filter((i) => i !== product);
24          setCart(newCart);
25          toast.success('Product removed from cart!', {
26              position: "top-right",
27              autoClose: 3000,
28              hideProgressBar: false,
29              closeOnClick: true,
30              pauseOnHover: true,
31              draggable: true,
32              progress: undefined,
33              theme: "light",
34              transition: Bounce,
35          });
36      }
37      
38      return (
39          <div className="p-15 space-y-4">
40  
41              <h1>Your Cart</h1>
42              
43              {cart.length ?
44               <>
45                   {cart.map((product) => (
46                       <div className="flex justify-between p-3 border-gray-400 border-1 rounded-md">
47                           <div className="flex gap-5">
48                               <div className="p-2">
49                                   <img className="w-13 h-13" alt="" src={product.icon}/>
50                               </div>
51                               <div className="flex flex-col">
52                                   <h3>{product.name}</h3>
53                                   <p>${product.price}</p>
54                               </div>
55                           </div>
56                           <button id="rmv-btn" onClick={() => removeProduct(product)} className="btn btn-error btn-soft">Remove</button>
57                       </div>
58                   ))}
59  
60                   <p className="flex justify-between"><span className="text-gray-600">Total</span><span className="font-bold text-lg">${totalPrice.toFixed(2)}</span></p>
61  
62                   <button onClick={handleCheckout} className="btn w-full brand-color">Proceed to Checkout</button>
63               </>
64               :
65               <p className="text-2xl text-center text-gray-500">Cart is empty</p>
66              }
67          </div>
68      );
69  };