import React, { useState, FC } from "react";
import { Carousel, Image } from "antd";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import styles from "./sellerOffers.module.scss";

const sellerOffers: FC<any> = (props) => {
  let banner: any;
  if (props.sellerData.banner) {
    banner = JSON.parse(props.sellerData.banner);
  }

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
  };

  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          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%",
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }

  return (
    <div className={styles.offerContainer}>
      {/* <Carousel {...slickSettings} className={styles.slickbottom}>
        {Array.isArray(banner) &&
          banner.map((img: any) => {
            return (
              <Image
                src={`${img.url}`}
                alt={`offers-${img.id}.png`}
                className={styles.contentStyle}
                key={img.id}
              />
            );
          })}
      </Carousel> */}
    </div>
  );
};

export default sellerOffers;