text: import React from "react"
  import { graphql } from "gatsby"
  import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
  import Layout from "../components/layout/layout"
  import Head from "../components/head"
  import blogStyles from "./blog.module.scss"
  
  export const query = graphql`
    query($slug: String!) {
      contentfulBlogPost(slug: { eq: $slug }) {
        title
        publishedDate(formatString: "Do MMM, YYYY")
        body {
          json
        }
      }
    }
  `
  
  const Blog = ({ data }) => {
    const options = {
      renderNode: {
        "embedded-asset-block": node => {
          const alt = node.data.target.fields.title["en-US"]
          const url = node.data.target.fields.file["en-US"].url
          return <img alt={alt} src={url} />
        },
      },
    }
    return (
      <Layout>
        <Head title={data.contentfulBlogPost.title} />
        <div className={blogStyles.container}>
          <h1>{data.contentfulBlogPost.title}</h1>
          <p>{data.contentfulBlogPost.publishedDate}</p>
          {documentToReactComponents(data.contentfulBlogPost.body.json, options)}
        </div>
      </Layout>
    )
  }
  
  export default Blog
  