import React, { useState, FC } from "react";
import { Image } from 'antd';
import cx from 'classnames';
import { useRouter } from "next/router";
import Slider from 'react-slick';
import styles from "./sellerProductBrands.module.scss";
import { SampleNextArrow, SamplePrevArrow } from "../common/ArrowDirections";
import { baseUrl, defaultImg } from "../../../constants/urls";

const SellerProductBrands: FC<any> =  (props) => {
  const {handleSetPage} = props;
  const brands = new Array(8).fill(null);
  const router = useRouter();

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

  const findByBrandName = (brandId:any, brandName :any, brandLogo:string) => {
   
    router.push({
      pathname: `/seller/sellerFindByBrand/1`,
      query: {
        brand: brandName,
        sellerid: props.sellerId,
        brandId: brandId,
        url: brandLogo,
      },
    });
  };
  return (
    <>
    <div className={cx("container my-10", styles.sellerProductBrands)} id="SellerProductBrands">
     <h2 className={styles.sellerSectionTitle}>Our Brands</h2>
      <div className={styles.sliderMain}>
      <Slider {...slickSettings}>
        {Array.isArray(props.sellerBrands) && props.sellerBrands.map((brand:any,idx:number) => {
          return (
            <div key={idx} className={styles.home_find_brands_item} onClick={()=>{handleSetPage(brand)}}>
              <Image
              preview={false}
               className={styles.home_find_brands_img}
                height={150}
                src={brand.brand_logo=="" || brand.brand_logo==null?`${defaultImg}`:`${baseUrl}/${brand.brand_logo}`}
                alt={"img"}
              />
            </div>
          );
        })}
        </Slider>
      </div>
      </div>
    </>
  );
};
export default SellerProductBrands;