import { Carousel, Tabs } from "antd";
import { FC, useState } from "react";
import TabOfferOptions from "./TabOfferOptions";
import cx from "classnames";
import styles from "./offersTabs.module.scss";
import { baseUrl } from "../../../constants/urls";
import type { DotPosition } from "antd/es/carousel";
import {
  SampleNextArrow,
  SamplePrevArrow,
} from "../../sellerLanding/common/ArrowDirections";
const HomeOffersPromotion: FC<any> = ({ offerData }) => {
  const slickSettings = {
    dots: true,
    arrows: true,
    infinite: false,
    speed: 2500,
    slidesToShow: 8,
    slidesToScroll: 8,
    autoplay: true,

    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 6,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
        },
      },
    ],
  };
 

  return (
    <>
      <div className={cx(styles.offersContainer)}>
        <Carousel effect="fade" autoplay dotPosition={"bottom"} className="gggg">
          {offerData.map((img: any, idx: number) => {
            return (
              <div key={idx} className={cx(styles.home_offer_image,"cursor-pointer")}>
                <img
                  src={`${baseUrl}/storage/${img.image}`}
                  alt={`${idx}-${img.image}`}
                  onClick={() => {
                    window.open(img.url,"_self");
                  }}
                />
               
                {/* <div></div> */}
              </div>
            );
          })}
        </Carousel>
      </div>
    </>
  );
};
export default HomeOffersPromotion;