import { Image } from "antd";
import Slider from "react-slick";
import styles from "./adsOffer.module.scss";
import Marquee from "react-fast-marquee";
import { FC } from "react";
import { baseUrl } from "../../../constants/urls";
import { useMediaQuery } from "react-responsive";
const AdsOffer: FC<any> = ({ addsData }) => {
  
  
  const adds = new Array(8).fill(null);
  const largeScreen = useMediaQuery({ minWidth: 1921 });

  const slickSettings = {
    dots: false,
    arrows: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    slidesToShow: 3,
    slidesToScroll: -1,
    cssEase: "linear",
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          dots: true,
        },
      },
    ],
  };


  return (
    <>
      <div className={styles.discountContainer} style={{marginTop: largeScreen ? "2em" : "" }}>
        <div className={styles.sliderMain}>
          <Slider {...slickSettings}>
            {addsData.map((img: any, i: number) => {
              return (
                <Image
                  preview={false}
                  key={i}
                  src={`${baseUrl}/storage/${img.image}`}
                  alt={`images/ads/add-${i + 1}.svg`}
                  className={styles.imageTag}
                  width={"24em"}
                  height={largeScreen ? "12em" : "8.5em"}
                />
              );
            })}
          </Slider>
        </div>
      </div>
    </>
  );
};
export default AdsOffer;