import React from "react";
import Carousel, { consts } from "react-elastic-carousel";
import { google, envato } from "../../Constant/Images";
import { Button } from "react-bootstrap";
import { AiOutlineRight, AiOutlineLeft } from "react-icons/ai";
import style from "./Carousel.module.scss";

const CarouselComponent = () => {
  const myArrow = ({ type, onClick, isEdge }) => {
    const pointer =
      type === consts.PREV ? (
        <AiOutlineLeft className={style.icon} />
      ) : (
        <AiOutlineRight className={style.icon} />
      );
    return (
      <button onClick={onClick} disabled={isEdge} className={style.button}>
        {pointer}
      </button>
    );
  };
  return (
    <Carousel
      pagination={false}
      itemsToShow={4}
      itemsToScroll={4}
      renderArrow={myArrow}
    >
      <img src={envato} alt="" className={style.img} />
      <img src={google} alt="" className={style.img} />
      <img src={envato} alt="" className={style.img} />
      <img src={google} alt="" className={style.img} />
      <img src={google} alt="" className={style.img} />
      <img src={envato} alt="" className={style.img} />
      <img src={google} alt="" className={style.img} />
      <img src={google} alt="" className={style.img} />
      <img src={envato} alt="" className={style.img} />

      {/* {items.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))} */}
    </Carousel>
  );
};

export default CarouselComponent;
