import React, { useState, FC } from "react";
import { Button, Card, Carousel, Image,Slider } from "antd";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import styles from "./featuredProducts.module.scss";
import { useRouter } from "next/router";
import { baseUrl, defaultImg } from "../../../constants/urls";
import cx from "classnames"
const featuredProducts: FC<any> = ({featureList}) => {
  const banner = new Array(1).fill(null);
  const banners = banner;
  const router:any = useRouter();
  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          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%",
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }

  return (
    <div className={styles.featuredContainer}>
     
              <div className={cx("ant-row")} >
                <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}>
                  <div style={{marginLeft:"1em"}}>
                    <div className={styles.textSubTitle}>{router.query.cateName?.replace(/[^a-zA-Z ]/g, '')}</div>
                    <div className={styles.heading}>High-Performance {router.query.cateName?.replace(/[^a-zA-Z ]/g, '')} in Best Price</div>
                    <div dangerouslySetInnerHTML={{__html:featureList?.[0]?.description}} className={styles.description}/>
                    <Button className={styles.buttonDisplay} type="primary">EXPLORE CATEGORIES</Button>
                  </div>
                </div>
                <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"} style={{display:"flex",justifyContent:"flex-end"}}>
                <div className={styles.ImageStyle}>
                  <img src={featureList?.[0]?.logo===null?`${defaultImg}`:`${baseUrl}/cache/small/${featureList?.[0]?.logo}`} alt=""  />
                </div>
                </div>

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

export default featuredProducts;