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)
            }
        },
    }`);

    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.hero1},
        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.hero1},
        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', 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