import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
import CategoryCard from "./CategoryCard";

const categories = [
  "هدایای تبلیغاتی",
  "کارت ویزیت",
  "بروشور و کاتالوگ",
  "استیکر و لیبل",
  "پاکت و جعبه",
  "سربرگ و اوراق اداری",
  "بنر و فلکس",
  "تقویم و سررسید",
  "چاپ روی پارچه",
  "لوازم نمایشگاهی",
];

const CategorySection = () => {
  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">
          {categories.map((title) => (
            <CarouselSlide key={title}>
              <CategoryCard title={title} />
            </CarouselSlide>
          ))}
        </CarouselTrack>
      </Carousel>
    </div>
  );
};

export default CategorySection;
