import React, { useState } from 'react'

import { useStaticQuery, graphql } from "gatsby"
import Image from './Image'

const Example = () => {

    const images = useStaticQuery(graphql`
    query {
        hero1: file(relativePath: {eq: "hero1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        author: file(relativePath: {eq: "teambuilding/author.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        goldberg: file(relativePath: {eq: "teambuilding/goldberg.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        intellectual: file(relativePath: {eq: "teambuilding/intellectual.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        wool: file(relativePath: {eq: "teambuilding/wool.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
    }`);

    const [examples, setExamples] = useState([
        {id: 1, title: 'Веревочный курс', img: images.hero1},
        {id: 2, title: 'Тематический «Форд Боярд» ', img: images.hero1},
        {id: 3, title: 'Творческий', img: images.hero1},
        {id: 4, title: 'Интеллектуальный квест', img: images.intellectual},
        {id: 5, title: 'Машина Голдберга (цепная реакция)', img: images.goldberg},
        {id: 6, title: 'Шерстяной тимбилдинг ', img: images.wool},
        {id: 7, title: 'Авторский тимбилдинг', img: images.author},
        {id: 8, title: 'Зимние Олимпийские игры', img: images.hero1},
        {id: 9, title: 'Командная картина', img: images.hero1},
        {id: 10, title: 'Гигантская пирамида', img: images.hero1},
    ]);

    return (
        <section className='pt-32 bg-[#0E0808]'>
            <h2 className='text-3xl mb-20 font-semibold text-white text-center uppercase'>Примеры тимбилдингов</h2>
            <div className="flex flex-wrap">
                {examples.map(example =>
                    <Image key={example.id} title={example.title} image={example.img}></Image>
                )}
            </div>
        </section>
    )
}

export default Example