import React, { useState, FC, useEffect } from "react";
import cx from "classnames";
import styles from "./sellerFeaturedProducts.module.scss";
import Slider from "react-slick";
import MediaQuery, { useMediaQuery } from "react-responsive";
import { SampleNextArrow, SamplePrevArrow } from "../common/ArrowDirections";
import {
  RightOutlined,LeftOutlined
} from "@ant-design/icons";
import ProductCardES from "../../products/productCardES";
import FeaturedGridView from "../../common/featureProduct/FeaturedGridView";
import { isArray } from "lodash";

const sellerFeaturedProducts: FC<any> = ({ products }) => {
  const isGridView = true;
  function SampleNextArrow(props:any) {
    const { className, style, onClick } = props;
    return (
      <div
     
        style={{ ...style, display: "block", zIndex:"15",borderRadius:"50%",height:20,width:20, opacity:"1",right:0,color: "#fff",justifyContent:"center"  }}
        onClick={onClick}
  
      > <RightOutlined  className={styles.iconRightDisplay}/></div>
    );
  }
  
  function SamplePrevArrow(props:any) {
    const { className, style, onClick } = props;
    return (
      <div
        
        style={{ ...style, display: "block", zIndex:"15",borderRadius:"50%",height:20,width:20, opacity:"1",left:0,color: "#fff",justifyContent:"center"}}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay}/>
      </div>
    );
  }
  
  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    speed: 400,
    slidesToShow: 5,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1223,
        settings: {
          slidesToShow: 3
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1
        },
      },
    ],
  };

  return (
    <>
    
      <div className={cx("container my-10")}>
        <h2 className={styles.sellerSectionTitle}>Promotions & Offers</h2>
          <Slider {...slickSettings}>
            {isArray(products?.data) && products?.data?.map((product: any) => {
              return (
                <div key={product.id}>
                  <FeaturedGridView
                    key={product.id}
                    product={product}
                    isGridView={isGridView}
                  />
                </div>
              );
            })}
          </Slider>
       </div>
     
     
    </>
  );
};

export default sellerFeaturedProducts;