import React, { useState } from 'react'
import { useStaticQuery, graphql } from "gatsby"

import Person from './Person'

const Team = ({...props}) => {

    const images = useStaticQuery(graphql`
    query {
        krasavin: file(relativePath: {eq: "team/krasavin.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        rovenskaya: file(relativePath: {eq: "team/rovenskaya.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        kryukova: file(relativePath: {eq: "team/kryukova.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        yazikov: file(relativePath: {eq: "team/yazikov.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
    }`);

    const [persons, setPersons] = useState([
        {id: 1, name: 'Алексей Красавин', post: 'Инвестор идей💡.\nПродюсер корпоративных мероприятий.', img: images.krasavin},
        {id: 2, name: 'Мария Ровенская - Тарасова ', post: 'Менеджер крутых проектов, Методолог игр.', img: images.rovenskaya},
        {id: 3, name: 'Алёна Крюкова', post: 'Фасилитатор, бизнес -тренер, игротехник, разработчик корпоративных мероприятий.', img: images.kryukova},
        {id: 4, name: 'Евгений Языков', post: 'Профессиональный ведущий', img: images.yazikov},
    ]);

    return (
        <section {...props} className='py-32 bg-[#0E0808]'>
            <div className="container mx-auto">
                <h2 className='text-3xl mb-12 font-semibold text-white text-center uppercase'>Наша команда</h2>
                <div className="flex">
                    {persons.map(person=>
                        <Person key={person.id} name={person.name} post={person.post} img={person.img}></Person> 
                    )}
                </div>
            </div>
        </section>
    )
}

export default Team