"use client";

import React, { useEffect, useState } from "react";
import "./Cart_Products.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Cart_Products_card from "./cart_Products_card/Cart_Products_card";
import May_you_like_also from "./may_you_like_also/May_you_like_also";
import Back_text_holder from "../common-components/back_text_holder/Back_text_holder";
import { useDispatch, useSelector } from "react-redux";
import { getAllCart } from "../../features/cart/cartSlice";
import { FaShoppingCart } from "react-icons/fa";
import { myAccount } from "../../features/my_account/Slice";
function Cart_Products() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Cart Products", link: "", isActive: true },
  ];

  const isSignin = useSelector((state) => state.auth.is_signin);
  const dispatch = useDispatch();
  const allcartData = useSelector((state) => state.cart.allCarts);
  useEffect(() => {
    dispatch(getAllCart(isSignin));
  }, [dispatch]);

  const [instock, setInstock] = useState(false);
  useEffect(() => {
    dispatch(myAccount());
  }, [dispatch]);
  return (
    <>
      <section className="Cart_Products">
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />
        {allcartData?.data?.length > 0 ? (
          <div className="container container-se">
            <div className="row">
              <div className="col-xl-9 col-lg-8 ">
                <Cart_Products_card
                  instock={instock}
                  setInstock={setInstock}
                  data={allcartData}
                />
              </div>
              <div className="col-xl-3 col-lg-4">
                <May_you_like_also instock={instock} data={allcartData} />
              </div>
            </div>
          </div>
        ) : (
          <div className="Common_Not_Found">
            <div className="not_found_icon">
              <FaShoppingCart />
            </div>

            <h4 className="not_found_title">Your Cart is Empty</h4>

            <p className="not_found_description">
              Looks like you haven't added anything to your cart yet.
            </p>
          </div>
        )}
        <Back_text_holder baseLink="/shop" backText="Product" />
      </section>
    </>
  );
}

export default Cart_Products;
