content: import React from 'react'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  import styled from 'styled-components'
  
  import { Layout, Wrapper, BlogPostTile, SectionTitle } from '../components'
  
  const Content = styled.div`
    grid-column: 2;
    box-shadow: 0 4px 120px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 3rem 6rem;
    @media (max-width: ${props => props.theme.breakpoints.tablet}) {
      padding: 3rem 2rem;
    }
    @media (max-width: ${props => props.theme.breakpoints.phone}) {
      padding: 2rem 1.5rem;
    }
    overflow: hidden;
  `
  
  const Hero = styled.div`
    grid-column: 2;
    padding: 3rem 2rem 6rem 2rem;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    color: ${props => props.theme.colors.grey.dark};
  
    @media (max-width: ${props => props.theme.breakpoints.phone}) {
      padding: 2rem 1rem 4rem 1rem;
    }
  
    p {
      font-size: 1.68rem;
      margin-top: -1rem;
      @media (max-width: ${props => props.theme.breakpoints.tablet}) {
        font-size: 1.45rem;
      }
      @media (max-width: ${props => props.theme.breakpoints.phone}) {
        font-size: 1.25rem;
      }
    }
  `
  
  const Blog = ({
    data: {
      allMdx: { edges: postEdges },
    },
  }) => (
    <Layout>
      <Wrapper>
        <Hero>
          <h1>Hi.</h1>
          <p>I'm Danny Phillips. I'm a software developer.</p>
        </Hero>
        <Content>
          <SectionTitle>Latest stories</SectionTitle>
          {postEdges.map(post => (
            <BlogPostTile
              title={post.node.frontmatter.title}
              date={post.node.frontmatter.date}
              excerpt={post.node.excerpt}
              timeToRead={post.node.timeToRead}
              slug={post.node.fields.slug}
              tags={post.node.frontmatter.tags}
              key={post.node.fields.slug}
            />
          ))}
        </Content>
      </Wrapper>
    </Layout>
  )
  
  export default Blog
  
  Blog.propTypes = {
    data: PropTypes.shape({
      allMdx: PropTypes.shape({
        edges: PropTypes.array.isRequired,
      }),
    }).isRequired,
  }
  
  export const BlogQuery = graphql`
    query BlogQuery {
      allMdx(
        sort: { fields: [frontmatter___date], order: DESC }
        filter: {
          fileAbsolutePath: { regex: "/blog/" }
          fields: { released: { eq: true } }
        }
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              date(formatString: "MM/DD/YYYY")
              tags
            }
            excerpt(pruneLength: 200)
            timeToRead
          }
        }
      }
    }
  `;
  