"use client";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { Product } from "@/modules/products/product";
import SecondProductCard from "./SecondProductCard";
import MotionEl from "../shared/animation/MotionEl";

type props = {
  title?: string;
  newest?: boolean;
  products: Product[] | [];
};
const SecondProductsSlider = ({ title, products, newest }: props) => {
  const { lang } = useCurrentLanguage();


  return (
    <>
      {products?.length > 0 && (
        <section className="py-20">
          <div className="container">
            <h2 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
              <TranslateClient text={title || ""} />
            </h2>

            <Carousel opts={{ direction: lang === "ar" ? "rtl" : "ltr" }}>
              <CarouselContent>
                {products?.map((product, index) => (
                  <CarouselItem
                    className="md:basis-1/2 lg:basis-1/4 2xl:basis-1/5 px-4"
                    key={product?.id}
                  >
                    <MotionEl animationType="bottom">
                      <SecondProductCard product={product} newest={newest} />
                    </MotionEl>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </Carousel>
          </div>
        </section>
      )}
    </>
  );
};

export default SecondProductsSlider;