import Image from 'next/image';
import { Navigation, Pagination, Scrollbar, A11y,  Autoplay  } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const GalleryCarousel = ({galleryImages, basepath}) => {
    console.log(galleryImages.data[0])
    return(
        <Swiper
        modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}
        scrollbar={{ draggable: true }}
        >
            {galleryImages.data.map(item => (
                <SwiperSlide
                    key={item.attributes.Title}
                >
                    <img 
                        src={basepath + item.attributes.Image.data.attributes.formats.medium.url}
                        alt={item.attributes.Title}></img>
                </SwiperSlide>
            ))}
        </Swiper>
    )
}

export default GalleryCarousel