text: import React from 'react'
  import PropTypes from 'prop-types'
  import { kebabCase } from 'lodash'
  import Helmet from 'react-helmet'
  import { graphql, Link } from 'gatsby'
  import Layout from '../components/Layout'
  import Content, { HTMLContent } from '../components/Content'
  
  export const BlogPostTemplate = ({
  	                                 content,
  	                                 contentComponent,
  	                                 description,
  	                                 tags,
  	                                 title,
  	                                 helmet,
                                   }) => {
  	const PostContent = contentComponent || Content
  
  	return (
  		<section className="section">
  			{helmet || ''}
  			<div className="container content">
  				<div className="columns">
  					<div className="column is-10 is-offset-1">
  						<h1 className="title is-size-2 has-text-weight-bold is-bold-light">
  							{title}
  						</h1>
  						<p>{description}</p>
  						<PostContent content={content} />
  						{tags && tags.length ? (
  							<div style={{ marginTop: `4rem` }}>
  								<h4>Tags</h4>
  								<ul className="taglist">
  									{tags.map(tag => (
  										<li key={tag + `tag`}>
  											<Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
  										</li>
  									))}
  								</ul>
  							</div>
  						) : null}
  					</div>
  				</div>
  			</div>
  		</section>
  	)
  }
  
  BlogPostTemplate.propTypes = {
  	content: PropTypes.node.isRequired,
  	contentComponent: PropTypes.func,
  	description: PropTypes.string,
  	title: PropTypes.string,
  	helmet: PropTypes.object,
  }
  
  const BlogPost = ({ data }) => {
  	const { markdownRemark: post } = data
  
  	return (
  		<Layout>
  			<BlogPostTemplate
  				content={post.html}
  				contentComponent={HTMLContent}
  				description={post.frontmatter.description}
  				helmet={
  					<Helmet titleTemplate="%s | Blog">
  						<title>{`${post.frontmatter.title}`}</title>
  						<meta
  							name="description"
  							content={`${post.frontmatter.description}`}
  						/>
  					</Helmet>
  				}
  				tags={post.frontmatter.tags}
  				title={post.frontmatter.title}
  			/>
  		</Layout>
  	)
  }
  
  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
        }
      }
    }
  `
  