import React from "react";
import { graphql, Link } from "gatsby";

export default ({ data }) => {
  console.log(data);
  const {
    markdownRemark: { frontmatter, html }
  } = data;

  return (
    <div>
      <Link to="blog">Back to blog!</Link>
      <h1>{frontmatter.title}</h1>
      <small>
        {frontmatter.author.join(" and ")}, {frontmatter.date}
      </small>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

export const pageQuery = graphql`
  query BlogPostPageQuery($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        author
        date(fromNow: true)
        slug
        title
      }
      html
    }
  }
`;