import React from "react";
import SectionHeader from "../SectionHeader";
import GeneralSlider from "@/components/UiComponents/CarouselSwiper/GeneralSlider";
import ProductCard from "@/components/sharedComponents/cards/ProductCard";
import TraderCard from "@/components/sharedComponents/cards/TraderCard";

interface Props {
  title: any;
  slideClass?: string;
  slides: any;
  className?: string;
  card_type?: "product" | "trader";
  showCustomArrows?: boolean;
  show_all_btn?: boolean;
  btn_href?: string;
}
const ProductsSlider = ({
  title,
  className,
  slides,
  card_type = "product",
  showCustomArrows = false,
  btn_href,
  slideClass,
}: Props) => {


  return (
    <section className={`main-sec  ${className ? className : ""}`}>
      <div className="container">
        <SectionHeader title={title} href={btn_href} />
        <GeneralSlider
          slideClass={`${slideClass ? slideClass : "!w-1/2 md:!w-1/3 lg:!w-1/4 xl:!w-1/5"} pe-4 last:!pe-0`}
          hideArrows
          showCustomArrows={showCustomArrows}
          className="home-slider"
        >
          {slides?.map((item: any) =>
            card_type == "product" ? (
              <ProductCard product={item} key={`product_card_${item?.id}`} />
            ) : (
              <TraderCard key={`trader_card_${item?.id}`} cardData={item} />
            )
          )}
        </GeneralSlider>
      </div>
    </section>
  );
};

export default ProductsSlider;