"use client";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/store/store";
import { NoCart } from "@/assets/svgs/Icons";
import OrderSummary from "./OrderSummary";
import { Spin } from "antd";
import EmptyContent from "@/components/sharedComponents/empty/EmptyContent";
import CartDetails from "./CartDetails";
import { useTranslations } from "next-intl";



const CartPageWrapper = () => {
  const { allCartItems, mainLoader, cartLength ,priceDetails} = useSelector((state: RootState) => state.cartConfig);
  const t = useTranslations();

  return (
    <section className="container">
        <h1 className=" text-2xl font-bold my-3 md:my-6">
          {t("NAV.cart")} ({cartLength})
        </h1>
    
        <Spin spinning={mainLoader}>
        { cartLength > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <CartDetails items={allCartItems} />
                  <OrderSummary cartLength={cartLength} orderDetails={priceDetails}  />
              </div>
          ) : <EmptyContent icon={<NoCart/>} href="/" btnText="Text.shope_now" title="Text.no_cart_title" />}
          </Spin>
        
    </section>
  );
};

export default CartPageWrapper;