import React from 'react';
import { DatoImage } from 'react-datocms';

const Page = ({ data }) => (
  <header>
    <h1>{data.blogPost.title}</h1>
    <DatoImage data={data.blogPost.cover.responsiveImage} />
  </header>
);

const query = gql`
  query {
    blogPost {
      title
      cover {
        responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
          # HTML5 src/srcset/sizes attributes
          srcSet
          webpSrcSet
          sizes
          src

          # size information (post-transformations)
          width
          height
          aspectRatio

          # SEO attributes
          alt
          title

          # background color placeholder or...
          bgColor

          # blur-up placeholder, JPEG format, base64-encoded
          base64
        }
      }
    }
  }
`;

export default withQuery(query)(Page);