import React, { useState } from 'react'

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

const Example = () => {

    const images = useStaticQuery(graphql`
    query {
        img1: file(relativePath: {eq: "legosp/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        img2: file(relativePath: {eq: "legosp/3.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        },
        img3: file(relativePath: {eq: "legosp/4.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
            }
        } 
    }`);

    const [examples] = useState([
        {id: 1, img: images.img1},
        {id: 2, img: images.img2},
        {id: 3, img: images.img3},
    ]);

    return (
        <section className='pt-16 max-md:pt-16'>
            <div className="flex flex-wrap">
                {examples.map((example, index) =>
                    <Image initial={{ x: 0, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ delay:index*0.1, duration: 0.5 }} viewport={{ once: true }} key={example.id} title={example.title} image={example.img}></Image>
                )}
            </div>
        </section>
    )
}

export default Example