import React from 'react';
import Img from 'gatsby-image';
import { graphql, useStaticQuery } from 'gatsby';

const query = graphql`
  query {
    images: allFile(filter: { extension: { regex: "/jpeg|jpg|png|gif/" } }) {
      edges {
        node {
          extension
          relativePath
          childImageSharp {
            fluid(maxWidth: 560) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`;

const renderImage = file => {
  return <Img fluid={file.node.childImageSharp.fluid} />;
};

const Image = props => {
  const { images } = useStaticQuery(query);
  return renderImage(
    images.edges.find(image => image.node.relativePath === props.src),
  );
};

export default Image;