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

import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft";
import { BsArrowRight } from "@react-icons/all-files/bs/BsArrowRight";
import Review from './Review';


const Reviews = () => {
    const [swiperInstance, setSwiperInstance] = useState();
    const images = useStaticQuery(graphql`
    query {
        gopro: file(relativePath: {eq: "reviews/GoPro.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        dyson: file(relativePath: {eq: "reviews/Dyson.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        dell: file(relativePath: {eq: "reviews/Dell.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        gopro2: file(relativePath: {eq: "reviews/GoPro.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
    }`);
    const [reviews] = useState([
        {id: 0, title: 'GoPro', text: 'Сотрудничество с вашим бухгалтерским агентством стало для нас настоящим спасением. Они профессионально вели нашу финансовую отчетность, обеспечивая точность и своевременность. Рекомендуем их услуги всем предпринимателям!', date: '12.06.2023', img: images.gopro},
        {id: 1, title: 'Dyson', text: 'Ваше бухгалтерское агентство стало надежным партнером для нашей компании.  Сотрудничество с ними позволяет нам сосредоточиться на основном бизнесе без забот о налогах и финансовой отчетности.', date: '12.06.2023', img: images.dyson},
        {id: 2, title: 'Dell', text: 'Хотелось бы выразить благодарность вашему бухгалтерскому агентству за их профессионализм и отличное обслуживание. ', date: '12.06.2023', img: images.dell},
        {id: 3, title: 'GoPro', text: 'Сотрудничество с вашим бухгалтерским агентством стало для нас настоящим спасением. Они профессионально вели нашу финансовую отчетность, обеспечивая точность и своевременность. Рекомендуем их услуги всем предпринимателям!', date: '12.06.2023', img: images.gopro2}
    ]);

    return (
        <section className='py-[90px] max-md:py-9 max-sm:px-3 max-md:px-6'>
            <div className="container mx-auto">
                <div className="flex justify-between max-sm:flex-col max-md:mb-8 items-start w-full">
                    <h2 className='text-black max-w-[510px] max-md:max-w-none max-md:w-full font-semibold max-md:text-2xl max-xl:text-4xl max-2xl:text-[38px] max-md:mb-5 text-[44px] mb-[70px]'>Что о нас говорят наши клиенты</h2>
                    <div className="flex">
                        <button aria-label="Next slide" className='mr-5 max-md:mr-3 w-16 h-16 max-md:w-14 max-md:h-14 border-2 border-slate-600 rounded-full text-[28px] flex justify-center items-center text-slate-600 hover:text-red-500 hover:border-red-500 transition-all' onClick={() => swiperInstance.slidePrev()}><BsArrowLeft/></button>
                        <button aria-label="Prev slide" className='w-16 h-16 max-md:w-14 max-md:h-14 border-2 border-slate-600 rounded-full text-[28px] flex justify-center items-center text-slate-600 hover:text-red-500 hover:border-red-500 transition-all' onClick={() => swiperInstance.slideNext()}><BsArrowRight/></button>
                    </div>
                </div>
                <Swiper spaceBetween={50} slidesPerView={1} onSwiper={(swiper) => setSwiperInstance(swiper)} 
                    breakpoints={{
                        640: {
                            slidesPerView: 2,
                        },
                        1024: {
                            slidesPerView: 3,
                        },
                    }}>
                    {reviews.map(review=>
                        <SwiperSlide className='!h-auto' key={review.id}>
                            <Review title={review.title} text={review.text} date={review.date} img={review.img}/>
                        </SwiperSlide>
                    )} 
                </Swiper>
            </div>
        </section>
    )
}

export default Reviews;