import React from "react";
import { Card, Button } from "react-bootstrap";
import { useState } from "react";
const products = [
  {
    p_id: 1,
    p_name: "Product 1",
    p_cost: 10.99,
    p_category: "Category A",
    p_desc: "Description for product 1",
    p_image: "https://m.media-amazon.com/images/I/41xNB9WGLDL._MCnd_AC_.jpg",
  },
  {
    p_id: 2,
    p_name: "Product 2",
    p_cost: 20.99,
    p_category: "Category B",
    p_desc: "Description for product 2",
    p_image: "https://m.media-amazon.com/images/I/51mwR4KYp9L._MCnd_AC_.jpg",
  },
  {
    p_id: 3,
    p_name: "Product 3",
    p_cost: 15.99,
    p_category: "Category A",
    p_desc: "Description for product 3",
    p_image: "https://m.media-amazon.com/images/I/41WVCHnJY7L._MCnd_AC_.jpg",
  },
  {
    p_id: 4,
    p_name: "Product 4",
    p_cost: 5.99,
    p_category: "Category C",
    p_desc: "Description for product 4",
    p_image: "https://m.media-amazon.com/images/I/41ar14TnikL._MCnd_AC_.jpg",
  },
  {
    p_id: 5,
    p_name: "Product 5",
    p_cost: 25.99,
    p_category: "Category B",
    p_desc: "Description for product 5",
    p_image:
      "https://m.media-amazon.com/images/I/717ghA3VdNL._AC_UY327_QL65_.jpg",
  },
  {
    p_id: 6,
    p_name: "Product 6",
    p_cost: 18.99,
    p_category: "Category A",
    p_desc: "Description for product 6",
    p_image:
      "https://m.media-amazon.com/images/I/510+3Km7MtL._AC_UY327_QL65_.jpg",
  },
  {
    p_id: 7,
    p_name: "Product 7",
    p_cost: 12.99,
    p_category: "Category C",
    p_desc: "Description for product 7",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/kr2e3680/smartwatch/i/i/t/1-4-rmw2008-android-ios-realme-original-imag4y6fynwz3ukt.jpeg?q=70",
  },
  {
    p_id: 8,
    p_name: "Product 8",
    p_cost: 9.99,
    p_category: "Category B",
    p_desc: "Description for product 8",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/m/z/6/-original-imagn8v87hfyfrdh.jpeg?q=70",
  },
  {
    p_id: 9,
    p_name: "Product 9",
    p_cost: 22.99,
    p_category: "Category A",
    p_desc: "Description for product 9",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/e/4/c/-original-imaghxg9hnk2bztm.jpeg?q=70",
  },
  {
    p_id: 10,
    p_name: "Product 10",
    p_cost: 7.99,
    p_category: "Category C",
    p_desc: "Description for product 10",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/kfeamq80/smartwatch/a/u/s/ios-mydr2hn-a-apple-original-imafvvev9qsvhhgt.jpeg?q=70",
  },
  {
    p_id: 11,
    p_name: "Product 11",
    p_cost: 14.99,
    p_category: "Category B",
    p_desc: "Description for product 11",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/ksxjs7k0/smartwatch/s/g/x/android-sm-r875fzkainu-samsung-yes-original-imag6dthwtevempm.jpeg?q=70",
  },
  {
    p_id: 12,
    p_name: "Product 12",
    p_cost: 17.99,
    p_category: "Category A",
    p_desc: "Description for product 12",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/ksxjs7k0/smartwatch/u/j/h/android-sm-r890nzkainu-samsung-yes-original-imag6dtg9shty8zf.jpeg?q=70",
  },
  {
    p_id: 13,
    p_name: "Product 13",
    p_cost: 11.99,
    p_category: "Category C",
    p_desc: "Description for product 13",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/g/7/l/-original-imagh932jrkynahy.jpeg?q=70",
  },
  {
    p_id: 14,
    p_name: "Product 14",
    p_cost: 6.99,
    p_category: "Category B",
    p_desc: "Description for product 14",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/ksxjs7k0/smartwatch/r/p/f/android-sm-r890nzsainu-samsung-yes-original-imag6dtgqd5bffrt.jpeg?q=70",
  },
  {
    p_id: 15,
    p_name: "Product 15",
    p_cost: 21.99,
    p_category: "Category A",
    p_desc: "Description for product 15",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/i/m/o/-original-imagkfm8nxr9bsuz.jpeg?q=70",
  },
  {
    p_id: 16,
    p_name: "Product 16",
    p_cost: 16.99,
    p_category: "Category C",
    p_desc: "Description for product 16",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/g/w/8/1-78-bsw052-android-ios-fire-boltt-yes-original-imaggqzn5zvjfw9m.jpeg?q=70",
  },
  {
    p_id: 17,
    p_name: "Product 17",
    p_cost: 8.99,
    p_category: "Category B",
    p_desc: "Description for product 17",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/s/h/x/-original-imagg5qjsgky8h8a.jpeg?q=70",
  },
  {
    p_id: 18,
    p_name: "Product 18",
    p_cost: 23.99,
    p_category: "Category A",
    p_desc: "Description for product 18",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/l3ahpjk0/smartwatch/c/w/8/-original-imagegyhw5gemgnv.jpeg?q=70",
  },
  {
    p_id: 19,
    p_name: "Product 19",
    p_cost: 13.99,
    p_category: "Category C",
    p_desc: "Description for product 19",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/g/8/3/-original-imaggtjvyydggq7k.jpeg?q=70",
  },
  {
    p_id: 20,
    p_name: "Product 20",
    p_cost: 19.99,
    p_category: "Category B",
    p_desc: "Description for product 20",
    p_image:
      "https://rukminim1.flixcart.com/image/612/612/xif0q/smartwatch/v/v/e/-original-imagkvyessegcmp5.jpeg?q=70",
  },
];

function Dashboard({ products }) {
  const [cartItems, setCartItems] = useState([]);

  const handleAddToCart = (product) => {
    setCartItems([...cartItems, product]);
  };

  const handleRemoveFromCart = (itemToRemove) => {
    setCartItems(cartItems.filter((item) => item.p_id !== itemToRemove.p_id));
  };

  const calculateTotal = () => {
    return cartItems.reduce((acc, item) => acc + item.p_cost, 0);
  };

  return (
    <div>
      <div className="row">
        <div className="col-10">
          <div className="row row-cols-3 my-3">
            {products.map((product, i) => (
              <div className="col my-3" key={i}>
                <div className="card">
                  <div className="card-header">
                    <img
                      src={product.p_image}
                      className="card-img-top"
                      alt={product.p_name}
                    />
                  </div>
                  <div className="card-body">
                    <div className="h2 card-title">{product.p_name}</div>
                    <div className="h4 card-subtitle text-muted">
                      {product.p_cost}
                    </div>
                  </div>
                  <div className="card-footer">
                    <button
                      onClick={() => {
                        alert(product.p_desc);
                      }}
                      className="btn btn-outline-info btn-block btn-sm"
                      data-toggle="tooltip"
                      data-placement="bottom"
                      title={product.p_desc}
                    >
                      Learn More
                    </button>
                    <button
                      onClick={() => {
                        handleAddToCart(product);
                      }}
                      className="btn btn-outline-success btn-block btn-sm"
                    >
                      Add to Cart
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="col-2">
          <h2>Cart</h2>
          {cartItems.length === 0 ? (
            <p>Your cart is empty.</p>
          ) : (
            <>
              <ul>
                {cartItems.map((item, i) => (
                  <li className="mb-3" key={i}>
                    <div className="card">
                      <div className="card-header">
                        <img
                          src={item.p_image}
                          className="card-img-top"
                          alt={item.p_name}
                        />
                      </div>
                      <div className="card-body">
                        <div className="h5 card-title">{item.p_name}</div>
                        <div className="h6 card-subtitle text-muted">
                          {item.p_cost}
                        </div>
                      </div>
                      <div className="card-footer">
                        <button
                          onClick={() => {
                            handleRemoveFromCart(item);
                          }}
                          className="btn btn-outline-danger btn-block btn-sm"
                        >
                          Remove
                        </button>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
              <hr />
              <div>
                <h3>Total Cost: {calculateTotal()}</h3>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default Dashboard;