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

const OrderByApplication: FC = () => {
  return (
    <div className="px-4 py-12 sm:px-8 sm:py-16 lg:p-[120px] bg-[#F1F6FA] mt-12 sm:mt-16 lg:mt-[120px]">
      <div className="text-lg sm:text-2xl font-bold">سفارش بر اساس کاربرد</div>
      <Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
        <div className="flex mt-8 sm:mt-12 justify-between items-center gap-4">
          <div className="min-w-0 flex-1 max-w-[240px] sm:max-w-none sm:flex-none">
            <Select
              options={[
                {
                  label: "محبوب‌ترین محصولات",
                  value: "popular",
                },
                {
                  label: "جدیدترین محصولات",
                  value: "newest",
                },
                {
                  label: "پرفروش‌ترین محصولات",
                  value: "best_selling",
                },
              ]}
            />
          </div>
          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
        </div>

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

export default OrderByApplication;