1  import { useState } from 'react';
 2  import { Bounce, toast } from 'react-toastify';
 3  
 4  export default function Product({ productObject, cart, setCart }) {
 5  
 6      const [addedCart, setAddedCart] = useState(false);
 7  
 8      function handleCart() {
 9          setCart([...cart, productObject]);
10          setAddedCart(true);
11          toast.success('Product added to cart!', {
12              position: "top-right",
13              autoClose: 3000,
14              hideProgressBar: false,
15              closeOnClick: true,
16              pauseOnHover: true,
17              draggable: true,
18              progress: undefined,
19              theme: "light",
20              transition: Bounce,
21          });
22      }
23  
24      const badges = {
25          "New": 'badge-success',
26          "Popular": 'badge-primary',
27          "Best Seller": 'badge-warning',
28      }
29  
30      return (
31          <div className="product flex flex-col justify-between gap-3 border-gray-500 border-1 rounded-lg p-5">
32              <div className={ "self-end badge badge-soft badge-sm sm:badge-md rounded-full " + badges[productObject.tag]}>{productObject.tag}</div>
33              <div className="rounded-full border-gray-200 border-2 w-fit p-4">
34                  <img className="h-5 w-5 sm:h-10 sm:w-10" src={productObject.icon}/>
35              </div>
36              <h3>{productObject.name}</h3>
37              <p className="font-light text-sm sm:text-md">{productObject.description}</p>
38              <p><span className="font-bold text-lg sm:text-xl">${productObject.price}</span>/{productObject.period === "monthly" ? "Mo" : "One-Time"}</p>
39              <div className="features text-sm sm:text-md">
40                  {productObject.features.map((f) => (
41                      <p className="flex gap-2"><span>✅</span><span>{f}</span></p>
42                  ))}
43  
44              </div>
45              <button onClick={handleCart} className="btn btn-sm sm:btn-md brand-color w-full">{addedCart ? "Added to Cart" : "Buy Now"}</button>
46              
47          </div>
48      );
49  };