text: import React, { createElement } from "react"
  import { graphql } from "gatsby"
  import { GatsbyImage, getImage } from "gatsby-plugin-image"
  import { BlockRenderer } from "../components/Blocks/BlockRenderer"
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  
  const Homepage = ({
    data: {
      wpPage: {
        heroTextAndImage: {
          fullWidthImage,
          heroText: { fontSize, text },
        },
        blocks,
      },
    },
  }) => {
    const image = getImage(fullWidthImage.localFile)
  
    const header = createElement(
      `h${fontSize}`,
      {
        className: "header",
      },
      text
    )
    return (
      <Layout>
        <Seo title="All posts" />
        {header}
        <div className="hero_image">
          <figure>
            <GatsbyImage image={image} alt="" layout={"fullWidth"} />
          </figure>
        </div>
        {blocks.map((block, i) => {
          return <BlockRenderer {...block} key={i} />
        })}
      </Layout>
    )
  }
  
  export const query = graphql`
    query homepageQuery {
      wpPage(isFrontPage: { eq: true }) {
        heroTextAndImage {
          heroText {
            fontSize
            text
          }
          fullWidthImage {
            localFile {
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH)
              }
            }
          }
        }
        blocks {
          name
          ... on WpCoreHeadingBlock {
            attributes {
              ... on WpCoreHeadingBlockAttributes {
                level
                content
              }
            }
          }
          ... on WpCoreParagraphBlock {
            attributes {
              ... on WpCoreParagraphBlockAttributes {
                content
              }
            }
          }
          ... on WpCoreCoverBlock {
            innerBlocks {
              name
              ... on WpCoreParagraphBlock {
                attributes {
                  ... on WpCoreParagraphBlockAttributes {
                    content
                  }
                }
              }
              ... on WpCoreHeadingBlock {
                attributes {
                  ... on WpCoreHeadingBlockAttributes {
                    content
                    level
                  }
                }
              }
              ... on WpCoreButtonsBlock {
                innerBlocks {
                  name
                  ... on WpCoreButtonBlock {
                    attributes {
                      ... on WpCoreButtonBlockAttributes {
                        text
                        textColor
                        backgroundColor
                        url
                      }
                    }
                  }
                }
              }
            }
            attributes {
              ... on WpCoreCoverBlockAttributes {
                url
                customOverlayColor
              }
            }
          }
        }
      }
    }
  `
  
  export default Homepage
  