import React, { FC } from "react";
import weAreTrustedByData from "../../../mockData/weAreTrustedBy";
import Rating from "../../home/weAreTrusted/rating/Rating";
import styles from "./customerTestimony.module.scss";
import cx from "classnames";
import Slider from "react-slick";
import { SampleNextArrow, SamplePrevArrow } from "../common/ArrowDirections";
import moment from "moment";
import indispareTestMonial from "../../../mockData/indispareTestMonial";
import { IBMS, KHANNA, Others, PSR, PTC, SALASAR } from "../../../mockData/vendrorReviews";
import { Image, Rate } from "antd";
import {
  UserOutlined
} from "@ant-design/icons";
const customerTestimony: FC<any> = ({ reviews, sellerData }) => {
  const slickSettings = {
    dots: true,
    arrows: false,
    infinite: false,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 1,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          dots: true,
          arrows: false,
          infinite: true,
        },
      },
    ],
  };


  const reviewData =
    sellerData.id == 2
      ? IBMS
      : sellerData.id == 104
        ? PSR
        : sellerData.id == 108
          ? SALASAR
          : sellerData.id == 47
            ? PTC
            : sellerData.id == 74 ? KHANNA : Others;
  return (
    <>
      <div
        className={cx("container my-10", styles.customerTestimonyContainer)}
        id="CustomerTestimony"
      >
        {reviewData?.length > 0 ? <h2 className={styles.sellerSectionTitle}>
          See what our Customers say!
        </h2> : null}
        <div className={styles.home__we_are_trust__list}>
          <Slider {...slickSettings} className={styles.home_we_are_trust_slide}>
            {reviewData.map((testimonial: any, index: number) => (
              <div
                key={index}
                className={styles.home__we_are_trust__block_review_column}
               
              >
                <div className={styles.home__we_are_trust__item_avatar}>
                  <img alt="image" src={"/images/Testmonial.png"} />
                </div>
                <div className={styles.home__we_are_trust__item_content}>
                  <div className={styles.home__we_are_trust__item_text}>
                    <Image src={"/commas.svg"}  preview={false} style={{height:"22px",width:"28px"}}/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {testimonial.review}
                  </div>
                  <div className={styles.home__we_are_trust__item_meta}>
                    <div className={styles.home__we_are_trust__item_rating}>
                      {/* <Rating value={testimonial.rating} /> */}
                      {/* <Rate allowClear={false} value={testimonial.rating} disabled className={styles.rating} /> */}
                    </div>

                  </div>
                  <div className={styles.home__we_are_trust__date_name_display}>
                    <div
                      className={styles.home__we_are_trust__item_author}
                    ><UserOutlined  style={{fontSize:"40px"}}/>{`${testimonial.name}`} <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; &nbsp;{`${testimonial.company}`} </div>
                    {/* <div className={styles.home__we_are_trust__date_display}>
                      {testimonial.date}
                    </div> */}
                  </div>
                </div>
              </div>
            ))}
          </Slider>
        </div>
      </div>
    </>
  );
};

export default customerTestimony;