import React, { Component } from 'react'
import Link from 'gatsby-link'

import PageIntro from '../components/PageIntro'
import Card from '../components/Card'

import PageTransition from 'gatsby-plugin-page-transitions'

class Blog extends Component {
  render() {
    const data = this.props.data
    return (
      <PageTransition>
        <PageIntro
          headline="Bugs keep us busy"
          text="but occasionally we have fun & publish"
          sectionClasses="mb-16 lg:mb-4"
        />
        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
          {data.allWordpressPost.edges.map(({ node }) => (
            <div key={node.id} className="mt-4 md:w-1/2 p-2">
              <Card
                url={`blog/${node.slug}`}
                title={node.title}
                date={node.date}
                excerpt={node.excerpt}
                image={
                  node.featured_media
                    ? node.featured_media.localFile.childImageSharp.resolutions
                    : undefined
                }
              />
            </div>
          ))}
        </div>
      </PageTransition>
    )
  }
}

export const query = graphql`
  query blogQuery {
    allWordpressPost {
      edges {
        node {
          id
          title
          excerpt
          status
          slug
          date(formatString: "MMMM DD, YYYY")
          featured_media {
            localFile {
              childImageSharp {
                resolutions(width: 600, height: 300) {
                  src
                  width
                  height
                }
              }
            }
          }
        }
      }
    }
  }
`

export default Blog