text: import React from "react";
  import PropTypes from "prop-types";
  import { graphql } from "gatsby";
  import { getImage } from "gatsby-plugin-image";
  import Container from '@mui/material/Container';
  
  import Layout from "../components/Layout";
  import BlogRoll from "../components/BlogRoll";
  import FullWidthImage from "../components/FullWidthImage";
  
  // eslint-disable-next-line
  export const IndexPageTemplate = ({
    image,
    title
  }) => {
    const heroImage = getImage(image) || image;
  
    return (
      <div>
        <FullWidthImage img={heroImage} title={title} />
        <Container>
          <BlogRoll />
        </Container>
      </div>
    );
  };
  
  IndexPageTemplate.propTypes = {
    image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    title: PropTypes.string
  };
  
  const IndexPage = ({ data }) => {
    const { frontmatter } = data.markdownRemark;
  
    return (
      <Layout>
        <IndexPageTemplate
          image={frontmatter.image}
          title={frontmatter.title}
        />
      </Layout>
    );
  };
  
  IndexPage.propTypes = {
    data: PropTypes.shape({
      markdownRemark: PropTypes.shape({
        frontmatter: PropTypes.object,
      }),
    }),
  };
  
  export default IndexPage;
  
  export const pageQuery = graphql`
    query IndexPageTemplate {
      markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
        frontmatter {
          title
          image {
            childImageSharp {
              gatsbyImageData(quality: 100, layout: FULL_WIDTH)
            }
          }
        }
      }
    }
  `;
  