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


export const ImageSlide = ({children}:any) => {
    const [current, setCurrent] = useState(0);
    const length = children.length;
    
    const array = Children.toArray(children);
    console.log(array)
    
    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>
    );
};