import React, { useState, FC, useEffect } from "react";
import cx from "classnames";
import { Card, Image } from "antd";
import { SampleNextArrow, SamplePrevArrow } from "../common/ArrowDirections";
import styles from "./sellerCertificates.module.scss";
import Slider from "react-slick";
import Meta from "antd/lib/card/Meta";
import _ from "lodash";
import { AnyArray } from "immer/dist/internal";

const sellerCertificates: FC<any> = ({images}) => {
  const [imagesData,setImagesData] = useState<any>([])
  const certificates = [
    {
      id: 1,
      name: "Certificate Of Sales",
      date: "06-August-2021",
      provider: "USHA",
    },
    // {
    //   id: 12,
    //   name: "Certificate Of Excellence",
    //   date: "01-09-2020",
    //   provider: "Applied Material",
    // },
    {
      id: 14,
      name: "Trained Ecommerce Specialist",
      date: "20-March-2019",
      provider: "Indispare",
    },
    {
      id: 16,
      name: "Authorised Online Seller",
      date: "25-June-2021",
      provider: "Casio",
    },
  ];

  // new Array(3).fill(null);

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    speed: 400,
    slidesToShow: 3,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 6,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          dots: true,
          arrows: false,
        },
      },
    ],
  };

 
 useEffect(() => {
  const result = [
    {sort: '4'},
    {sort: '5'},
    {sort: '6'},
  ].reduce((prev:any, orCondition:any) => prev.concat(_.filter(images, orCondition)), []);
  setImagesData(result);
 
 
 }, [])
 

  return (
    <>
      <div className={cx("container my-10")} id="SellerCertificates">
        <h2 className={styles.sellerSectionTitle}>Credentials</h2>
        <div className={styles.sliderMain}>
          <Slider {...slickSettings}>
            {_.isArray(imagesData)&&imagesData.map((cert:any,idx:number) => {
              return (
                <div key={idx} className={styles.home__find_brands__item}>
                  <Image
                    className={styles.home__find_brands__img}
                    src={cert.image}
                    alt={`img`}
                    preview={false}
                  />
                  
                </div>
              );
            })}
          </Slider>
        </div>
      </div>
    </>
  );
};

export default sellerCertificates;