"use client";

import CartSectionBalmy from "@/components/balmy/cart-section-balmy";
import BreadcrumbNav from "@/components/BreadcrumbNav";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { useEffect } from "react";
import { getCartProducts } from "@/store/slices/cart-slice";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";

export default function CartPage() {
  const dispatch = useAppDispatch();
  const cartData = useAppSelector((state) => state.cart.data);
  const pathname = usePathname();
  const locale = pathname?.split("/")[1] || "ar";
  const t = useTranslations("navigation");

  useEffect(() => {
    dispatch(getCartProducts(locale as string));
  }, [dispatch, locale]);

  return (
    <main
      dir={locale === "ar" ? "rtl" : "ltr"}
      className="container mx-auto px-3 sm:px-4 w-full pt-24 lg:pt-28"
    >
      <CartSectionBalmy
        data={cartData}
        breadcrumb={<BreadcrumbNav items={[{ label: t("home"), href: "/" }, { label: t("cart") }]} />}
      />
    </main>
  );
}