"use client";
import { prodcutData } from "@/data/product-data";
import { ProductType } from "@/interFace/interFace";
import { cart_product } from "@/redux/slices/cartSlice";
import { wishlist_product } from "@/redux/slices/wishlistSlice";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { useDispatch } from "react-redux";
const ShopContent = () => {
  const dispatch = useDispatch();
  const handleAddToCart = (product: ProductType) => {
    dispatch(cart_product(product));
    console.log(product);
  };
  const handleAddToWishlist = (product: ProductType) => {
    dispatch(wishlist_product(product));
  };
  return (
    <>
      <div className="row">
        <div className="col-12">
          <div className="tab-content" id="myTabContent">
            <div
              className="tab-pane fade show active"
              id="home"
              role="tabpanel"
              aria-labelledby="home-tab"
            >
              <div className="row">
                {prodcutData.map((item) => (
                  <div
                    key={item._id}
                    className="col-lg-12 col-md-12"
                    style={{ border: "1px solid #eaedff" }}
                  >
                    <div className="product mb-40">
                      <div className="product__img">
                        <Link href="/product-category/5">
                          <Image
                            style={{
                              width: "100%",
                              height: "18rem",
                              marginTop: "1rem",
                            }}
                            src={item.img}
                            alt="item-img"
                          />
                        </Link>
                        <div className="product-action text-center">
                          <Link
                            onClick={() => handleAddToWishlist(item)}
                            href=""
                          >
                            120 products
                          </Link>
                        </div>
                      </div>
                      <div className="product__content text-center pt-35">
                        <div className="pro-title" style={{ color: "black" }}>
                          <Link href=""> {item.productName} </Link>
                        </div>
                      </div>
                    </div>
                  </div>
                  // <div key={item._id} className="col-lg-12 col-md-12">
                  //   <div className="product mb-40">
                  //     <div className="product__img">
                  //       <Link href="">
                  //         <Image
                  //           style={{ width: "100%", height: "18rem" }}
                  //           src={item.img}
                  //           alt="item-img"
                  //         />
                  //       </Link>

                  //     </div>
                  //     <div className="product__content text-center pt-35">
                  //       <span className="pro-cat">
                  //         <Link href="">{item.categoryName}</Link>
                  //       </span>
                  //       <h4 className="pro-title">
                  //         <Link href=""> {item.productName} </Link>
                  //       </h4>
                  //       <div className="price">
                  //         <span>₺{item.price}.00 </span>
                  //         <span className="old-price">₺{item.oldPrice}.00</span>
                  //       </div>
                  //     </div>
                  //   </div>
                  // </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ShopContent;