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";
  import { AgentSidebar } from "../components/Agent";
  
  export const ListingPostTemplate = ({
    content,
    contentComponent,
    description,
    tags,
    title,
    helmet
  }) => {
    const PostContent = contentComponent || Content;
  
    return (
      <section>
        {helmet || ""}
        <div className="container">
          <div className="columns">
            <div className="column is-10 is-offset-1">
              <div className="columns flex-row-reverse-md">
                <div className="column">
                  <div className="section content">
                    <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>
                <AgentSidebar />
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };
  
  ListingPostTemplate.propTypes = {
    content: PropTypes.node.isRequired,
    contentComponent: PropTypes.func,
    description: PropTypes.string,
    title: PropTypes.string,
    helmet: PropTypes.object
  };
  
  const ListingPost = ({ data }) => {
    const { markdownRemark: post } = data;
  
    return (
      <Layout>
        <ListingPostTemplate
          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>
    );
  };
  
  ListingPost.propTypes = {
    data: PropTypes.shape({
      markdownRemark: PropTypes.object
    })
  };
  
  export default ListingPost;
  
  export const pageQuery = graphql`
    query BlogPostByID($id: String!) {
      markdownRemark(id: { eq: $id }) {
        id
        html
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tags
        }
      }
    }
  `;
  