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 Person from './Person';


const Team = () => {
    const [swiperInstance, setSwiperInstance] = useState();
    const images = useStaticQuery(graphql`
    query {
        person_1: file(relativePath: {eq: "team/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        person_2: file(relativePath: {eq: "team/2.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        person_3: file(relativePath: {eq: "team/3.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        person_4: file(relativePath: {eq: "team/4.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        person_5: file(relativePath: {eq: "team/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
    }`);
    const [team] = useState([
        {id: 0, name: 'Соломонов Максим', text: 'Генеральный директор.\nСтаж работы в налоговых органах более 7 лет.\nСоветник государственной гражданской службы РФ 3 класса.', img: images.person_1},
        {id: 1, name: 'Милюкова Ариадна', text: 'Высококвалифицированный специалист по кадровому учету.\nСоветник юстиции 3 класса.', img: images.person_2},
        {id: 2, name: 'Панов Емельян', text: 'Налоговый консультант.\nСтаж работы в сфере налогов более 10 лет.\nСоветник государственной гражданской службы РФ 3 класса.', img: images.person_3},
        {id: 3, name: 'Этуша Галина', text: 'Высококвалифицированный специалист по кадровому учету.\nСоветник юстиции 3 класса.', img: images.person_4},
        {id: 4, name: 'Соломонов Максим', text: 'Высококвалифицированный специалист по кадровому учету.\nСоветник юстиции 3 класса.', img: images.person_5}
    ]);

    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={20} slidesPerView={1} onSwiper={(swiper) => setSwiperInstance(swiper)} 
                    breakpoints={{
                        640: {
                            slidesPerView: 3,
                        },
                        1024: {
                            slidesPerView: 4,
                        },
                    }}>
                    {team.map(person=>
                        <SwiperSlide className='!h-auto' key={person.id}>
                            <Person name={person.name} text={person.text} img={person.img}/>
                        </SwiperSlide>
                    )} 
                </Swiper>
            </div>
        </section>
    )
}

export default Team;