import { Carousel, Tabs, Image } 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";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { BiChevronDown } from "react-icons/bi";
import Slider from "react-slick";
import { useMediaQuery } from "react-responsive";

const HomeLatestOffersMobile: FC<any> = ({ offerData }) => {
  const isMobile = useMediaQuery({ maxWidth: 767.68 });

  const slickSettings = {
    dots: false,
    arrows: false,
    infinite: true,
    speed: 400,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [

      {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
        },
      },
    ],
  };

  function SampleNextArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;
    return (
      <>
        <div onClick={onClick} className={styles.downIconDisplay}>
          <BiChevronDown style={{ fontSize: "20px", color: "#291c61" }} />
        </div>
      </>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;
    return (
      <>
        <UpOutlined className={styles.iconLeftDisplay} />
      </>
    );
  }

  return (
    <>
      <div className={cx("container",styles.OffersContainerMobile)}>
        <h2 className={styles.offersTextMobile}>Latest Offers</h2>
        <div className={styles.sliderMain}>
          <Slider {...slickSettings}>
            {offerData.map((img: any, idx: number) => {
               let imageSrc=""
               {
                 img
                   ? imageSrc = `${baseUrl}/storage/${img.image}`
                   : imageSrc = `/images/offerLatestImage${idx + 1}.jpg`;
               }
              return (
                <div key={idx} className={styles.home_offer_image_mobile}>
                  <img
                    // src={`${baseUrl}/storage/${img.image}`}
                    src={imageSrc}
                    alt={`${idx}-${img.image}`}
                    className={cx(styles.latestOffersImMobile)}
                    onClick={() => {
                      window.open(img.url,"_self");
                    }}
                  />
                </div>
              );
            })}
          </Slider>
        </div>
      </div>
    </>
  );
};
export default HomeLatestOffersMobile;