text: import React from "react";
  import PropTypes from "prop-types";
  import Helmet from "react-helmet";
  import { graphql } from "gatsby";
  import { PageWrapper, HTMLContent } from "../../components";
  
  import BlogPostTemplate from "./BlogPostTemplate";
  
  const BlogPost = ({ data }) => {
    const { markdownRemark: post } = data;
  
    return (
      <PageWrapper>
        <BlogPostTemplate
          content={post.html}
          contentComponent={HTMLContent}
          description={post.frontmatter.description}
          helmet={<Helmet title={`${post.frontmatter.title} | Blog`} />}
          tags={post.frontmatter.tags}
          title={post.frontmatter.title}
        />
      </PageWrapper>
    );
  };
  
  BlogPost.propTypes = {
    data: PropTypes.shape({
      markdownRemark: PropTypes.object
    })
  };
  
  export default BlogPost;
  
  export const pageQuery = graphql`
    query BlogPostByID($id: String!) {
      markdownRemark(id: { eq: $id }) {
        id
        html
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tags
        }
      }
    }
  `;
  