"use client";

import getProducts from "@/app/api-requests/getProducts";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import FirstProductCard from "../products/FirstProductCard";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import MotionEl from "./animation/MotionEl";
import LoadingSpinner from "./loadingSpinner/LoadingSpinner";

type props = {
  title?: string;
};

const RecommendedForYouSlider = ({ title }: props) => {
  const { lang } = useCurrentLanguage();
  const { data: productsData, isLoading } = getProducts();

  let content;

  if (isLoading) {
    content = <LoadingSpinner />;
  } else if (!isLoading && productsData) {
    content = (
      <Carousel opts={{ direction: lang === "ar" ? "rtl" : "ltr" }}>
        <CarouselContent>
          {productsData?.map((product, index) => (
            <CarouselItem
              className="md:basis-1/2 lg:basis-1/4 2xl:basis-1/5 px-2"
              key={product?.id}
            >
              <MotionEl animationType="bottom">
                <FirstProductCard product={product} className="bg-white" />
              </MotionEl>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    );
  }

  return (
    <>
      <h2 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
        <TranslateClient text={title || ""} />
      </h2>
      {content}
    </>
  );
};

export default RecommendedForYouSlider;