import React, { useState } from "react";
import { AiFillLeftCircle } from "react-icons/ai";

export const ImageSlide = ({ children }: any) => {
  const [current, setCurrent] = useState(0);
  const length = children.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 2);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 2);
  };
  if (children.length <= 0) {
    return null;
  }

  return (
    <section className="slider">
      <AiFillLeftCircle className="left-arrow" onClick={prevSlide} />
      <AiFillLeftCircle className="right-arrow" onClick={nextSlide} />
      {children.map((slide: any, index: any) => {
        return (
          <div
            className={index === current ? "slide active" : "slide"}
            key={index}
          >
            {index === current && (
              <img
                src={slide.props.children[0]}
                alt="travel image"
                className="image"
              />
            )}
          </div>
        );
      })}
    </section>
  );
};