import React, { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { useStaticQuery, graphql } from "gatsby"
import { Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/autoplay';

import Review from './Review';

const Reviews = () => {
    const images = useStaticQuery(graphql`
    query {
        img1: file(relativePath: {eq: "reviews/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img2: file(relativePath: {eq: "reviews/2.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img3: file(relativePath: {eq: "reviews/3.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img4: file(relativePath: {eq: "reviews/4.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        }
    }`);
    const [reviews] = useState([
        {id: 0, img: images.img1},
        {id: 1, img: images.img2},
        {id: 2, img: images.img3},
        {id: 3, img: images.img4},
    ])

    return (
        <section className='py-24 max-md:py-16 max-md:px-3'>
            <div className="container mx-auto">
                <h2 className='text-3xl mb-20 max-md:mb-10 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
                <Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={1}
                    breakpoints={{
                        640: {
                            slidesPerView: 2,
                        },
                        1024: {
                            slidesPerView: 3,
                        },
                    }}>
                    {reviews.map(review=>
                        <SwiperSlide key={review.id} className='!h-auto'>
                            <Review key={review.id} img={review.img} ></Review>
                        </SwiperSlide>
                    )}
                </Swiper>
            </div>
        </section>
    )
}

export default Reviews;