import React, { FC } from "react";
import indispareTestMonial from "../../../mockData/indispareTestMonial";
import styles from "./sellTestMonial.module.scss";
import cx from "classnames";
import Slider from "react-slick";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import sellOnIndispare from "../../../mockData/sellIndispare";

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 SellTemonial: FC<any> = () => {
  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: true,
    speed: 400,
    slidesToShow: 2,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 1,
          dots: false,
        },
      },
    ],
  };

  return (
    <>
        <div className={styles.statisticsContainer}>
          <div className={styles.monialContainer}>
            <Slider
              {...slickSettings}
              className={styles.home_we_are_trust_slide}
            >
              {sellOnIndispare.map((testimonial: any, index: number) => (
                <div key={index} className={styles.sellerReviewConatiner}>
                  <div className={styles.sellerReviewInnerConatiner}>
                    <div  style={{marginRight:"1em"}} className={styles.reviewImage}>
                      <img src={"/images/Seller/Really.png"} alt="img" />
                    </div>
                    <div>
                      <div className={styles.reviewTitle}>
                        <span>{testimonial.title}</span>
                      </div>
                      <div className={styles.subTitle}>
                        {testimonial.subText.map((subText: any, id: number) => (
                          <div key={id}>
                            <span className={styles.subText}> <img src={"/images/Seller/tick.png"} alt="img"/> <a style={{marginLeft:"5px"}}>{subText.text}</a></span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* <div className={styles.home__we_are_trust__item_avatar}>
                  <img alt="avatar" src={testimonial.avatar} />
                </div>
                <div className={styles.home__we_are_trust__item_content}>
                  <div className={styles.home__we_are_trust__item_text}>{testimonial.review}</div>
                  <div className={styles.home__we_are_trust__item_meta}>
                    <div className={styles.home__we_are_trust__item_rating}>
                     
                    </div>
                  </div>
                  <div className={styles.home__we_are_trust__date_name_display}>
                    <div className={styles.home__we_are_trust__item_author}>{`${testimonial.name}`}</div>
                    <div className={styles.home__we_are_trust__date_display}>{`${testimonial.date}`}</div>
                  </div>
                </div> */}
                </div>
              ))}
            </Slider>
          </div>
        </div>
    </>
  );
};
export default SellTemonial;