import { Image } from "antd";
import { FC } from "react";
import Slider from "react-slick";
import { baseUrl } from "../../../constants/urls";
import offersData from "../../../mockData/offers";
import styles from './offersTabs.module.scss';

const TabOfferOptions:FC<any> = ({offerData}) => {

  const sliderSettings = {
    dots: false,
    arrows: false,
    infinite: true,
    speed: 400,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3,
          dots: true,
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
          dots: true,
        }
      },
       {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
      
    ]
  };

  return (
    <>
      <div className={styles.slickContainer}>
        <Slider {...sliderSettings} >
          {offerData.map((img:any, idx:number) => {
            return (
              <div key={idx} className={styles.home__offer__image_head}>
                <img
                  src={`${baseUrl}/storage/${img.image}`}
                  alt={`${idx}-${img.image}`}
                  className={styles.home__offer__img}
                />
              </div>
            );
          })}
        </Slider>
      </div>
    </>
  );
};
export default TabOfferOptions;