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

import Review from './Review';

const Reviews = () => {

    const [reviews, setReviews] = useState([
        {id: 0, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйц йцвйцв в', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
        {id: 1, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгйцвйц  вйцвцй в йцвйцв йцв ш йцвв йц йцвгйшц рщв гшпщнйцвнпш гйцвшнпщгйц внпгщ йцнпгвйцв нгпнг йпцвгн пйцгнппйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
        {id: 2, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
        {id: 3, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
    ])

    return (
        <section className='py-24'>
            <div className="container mx-auto">
                <h2 className='text-3xl mb-20 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
                <Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={3} onSwiper={(swiper) => console.log(swiper)}>
                    {reviews.map(review=>
                        <SwiperSlide className='!h-auto'>
                            <Review key={review.id} text={review.text} name={review.name} post={review.post} company={review.company}></Review>
                        </SwiperSlide>
                    )}
            </Swiper>
            </div>
        </section>
    )
}

export default Reviews;