import Slider from "react-slick";
import styles from "./peopleLike.module.scss";
import cx from "classnames";
import { Image } from "antd";
import { FC } from "react";
import { baseUrl } from "../../../constants/urls";

const peopleLike:FC<any> = ({peopleData}) => {
  const people = [
    {
      icon:"/images/1.png"
    },
    {
      icon:"/images/2.png"
    },
    {
      icon:"/images/3.png"
    },
    {
      icon:"/images/4.png"
    },
    {
      icon:"/images/5.png"
    },
    {
      icon:"/images/6.png"
    },
    {
      icon:"/images/7.png"
    },
    {
      icon:"/images/8.png"
    },
    {
      icon:"/images/9.png"
    },
    {
      icon:"/images/10.png"
    },
    {
      icon:"/images/11.png"
    },
    {
      icon:"/images/12.png"
    }

  ];
  const slickSettings = {
    dots: false,
    arrows: false,
    infinite: false,
    speed: 400,
    slidesToShow: 16,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 12,
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 6,
        }
      }
      
    ]
  };
  return (
    <>
    <div className={styles.homeStatistics}>
      <div className={cx("containerFull my-10")} style={{marginTop:"4rem"}}>
        <div className={cx("ant-row")}>
          <div className={cx("ant-col ant-col-xs-24 ant-col-xl-6")} />
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-xl-4",
              styles.home__people_like__alignment
            )}
          >
            <div className={styles.home__people_like__title}>200+</div>
            <div className={styles.home__people_like__subtitle}>
              Onboarded Sellers
            </div>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-xl-4",
              styles.home__people_like__alignment
            )}
          >
            <div className={styles.home__people_like__title}>500K+</div>
            <div className={styles.home__people_like__subtitle}>
              Loaded Products
            </div>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-xl-4",
              styles.home__people_like__alignment
            )}
          >
            <div className={styles.home__people_like__title}>2000+</div>
            <div className={styles.home__people_like__subtitle}>
              User Registered
            </div>
          </div>
          <div className={cx("ant-col ant-col-xs-20 ant-col-xl-4")} />
        </div>
        {/* <div className={cx("ant-row justify-center")}>
        <div className={cx("ant-col ant-col-xs-24 ant-col-xl-17")} >

        
        <Slider {...slickSettings}>
          {peopleData.map((img:any, idx:number) => {
            return (
              <div
                key={idx}
                className={styles.home__people_like__image_container}
              >
                <Image
                  className={styles.home__people_like__image}
                 
                  src={`${baseUrl}/storage/${img.image}`}
                  alt={img.image}
                  preview={false}
                />
              </div>
            );
          })}
        </Slider>
        </div>
        </div>
        
        <div className={styles.home__people_like__bottom_text}>
          Trusted by 2,660 customers at some of the most exciting products
          offered by our Sellers.
        </div> */}

      </div>
      </div>
    </>
  );
};

export default peopleLike;