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

const ProductRelated: FC = () => {
  return (
    <section className="mt-8 px-4 sm:mt-10 sm:px-8 lg:mt-12 lg:px-30">
      <Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 12, md: 16, lg: 24 }}>
        <div className="flex items-center justify-between gap-4">
          <h2 className="text-lg font-bold text-[#0A1B2C] sm:text-xl">محصولات مرتبط</h2>
          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
        </div>

        <CarouselTrack className="mt-6 px-2 py-4 -mx-2 sm:mt-8">
          {RELATED_PRODUCTS.map((title) => (
            <CarouselSlide key={title}>
              <ProductCard title={title} />
            </CarouselSlide>
          ))}
        </CarouselTrack>
      </Carousel>
    </section>
  );
};

export default ProductRelated;