text: import React from "react"
  import styled from "styled-components"
  import Img from "gatsby-image"
  import { IoMdCheckmarkCircleOutline } from "react-icons/io"
  import { FaRegLightbulb } from "react-icons/fa"
  import { useStaticQuery, graphql } from "gatsby"
  
  const Testimonials = () => {
    const data = useStaticQuery(graphql`
      query TestimonialsQuery {
        allFile(
          filter: {
            ext: { regex: "/(jpg)|(png)|(jpeg)/" }
            name: { in: ["test1", "test2"] }
          }
        ) {
          edges {
            node {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `)
    const array = data.allFile.edges
    const TestimonialImage = array.map((item, index) => {
      let src = item.node.childImageSharp.fluid.src
      return (
        <Images key={index} src={src} fluid={item.node.childImageSharp.fluid} />
      )
    })
  
    return (
      <TestimonialsContainer>
        <TopLine>Testimonials</TopLine>
        <Description>What People Are Saying</Description>
        <ContentWrapper>
          <ColumnOne>
            <Testimonial>
              <IoMdCheckmarkCircleOutline
                css={`
                  color: #3fffa8;
                  font-size: 2rem;
                  margin-bottom: 1rem;
                `}
              />
              <h3>Natasha Fox</h3>
              <p>
                "I had the most wonderful experience travelling and seeing such
                amazing places, people and culture! It was easy to book my trip
                and accomoadation."
              </p>
            </Testimonial>
            <Testimonial>
              <FaRegLightbulb
                css={`
                  color: #f9b19b;
                  font-size: 2rem;
                  margin-bottom: 1rem;
                `}
              />
              <h3>Eric John</h3>
              <p>
                "Brilliant! It was so much fun exploring all these different
                places and learning about the history. The tour guide was very
                knowledgeable and it was a great experience overall."
              </p>
            </Testimonial>
          </ColumnOne>
          <ColumnTwo>{TestimonialImage}</ColumnTwo>
        </ContentWrapper>
      </TestimonialsContainer>
    )
  }
  
  export default Testimonials
  
  const TestimonialsContainer = styled.div`
    width: 100%;
    background: #fcfcfc;
    color: #000;
    padding: 20rem calc((100vw-1300px) / 2);
    height: 100%;
  `
  const TopLine = styled.p`
    color: #077bf1;
    font-size: 1rem;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    margin-top: 2rem;
  `
  const Description = styled.p`
    text-align: start;
    padding-left: 2rem;
    margin-bottom: 4rem;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: bold;
  `
  const ContentWrapper = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
    margin-bottom: 4rem;
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  `
  const ColumnOne = styled.div`
    display: grid;
    grid-template-rows: 1fr 1fr;
  `
  const Testimonial = styled.div`
    padding-top: 1rem;
    padding-right: 2rem;
    h3 {
      margin-bottom: 1rem;
      font-size: 1.5rem;
      font-style: italic;
    }
    p {
      color: #3b3b3b3;
    }
  `
  const ColumnTwo = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem;
    grid-gap: 10px;
    @media screen and (max-width: 500px) {
      grid-template-columns: 1fr;
    }
  `
  const Images = styled(Img)`
    border-radius: 10px;
    height: 100%;
  `
  