import Image from "next/legacy/image";
import { Navigation, Pagination, Scrollbar, A11y,  Autoplay  } from 'swiper';
import { Carousel, CarouselItem } from "react-bootstrap";
import { useState } from "react";
import Link from 'next/link'

const GalleryCarousel = ({galleryImages, basepath, gallery}) => {
    const bootstrap = galleryImages.data;
    const [index, setIndex] = useState(0);

    console.log(bootstrap)

    const handleSelect = (selectedIndex, e) => {
        setIndex(selectedIndex);
      };

      return(
        <Carousel activeIndex={index} onSelect={handleSelect} fade>
            {bootstrap.map((item => 
                <Carousel.Item key={item.id} interval={4000}>
                  <Link href={"/gallery/" + gallery.attributes.Slug + "/" + item.attributes.Slug}><Image 
                                  src={basepath + item.attributes.Image.data.attributes.formats.large.url}
                                  style={{
                                    width: '100%',
                                    height: 'auto',
                                  }}
                                  height={item.attributes.Image.data.attributes.formats.large.height}
                                  width={item.attributes.Image.data.attributes.formats.large.width}
                                  key={item.attributes.id}
                                  //className="card-img-top"
                                  alt={item.attributes.Title}
                                  ></Image></Link>
                <Carousel.Caption >
                  <h3>{item.title}</h3>
                  <p>{item.body}</p>
                </Carousel.Caption>
              </Carousel.Item>
                )
            )}

        </Carousel>
      )
}

export default GalleryCarousel