import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
import { type FC } from "react";
import ProductCard from "./ProductCard";

const ProductSection: FC = () => {
  return (
    <div className="mt-[120px] px-[120px]">
      <Carousel slidesPerView={5} gap={40}>
        <div className="flex justify-between items-center">
          <div className="font-bold text-2xl">محبوب‌ترین محصولات</div>
          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
        </div>

        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
          {Array.from({ length: 10 }).map((_, index) => (
            <CarouselSlide key={index}>
              <ProductCard />
            </CarouselSlide>
          ))}
        </CarouselTrack>
      </Carousel>
    </div>
  );
};

export default ProductSection;