text: import React from "react";
  import PropTypes from "prop-types";
  import { graphql } from "gatsby";
  import Helmet from "react-helmet";
  import Layout from "../components/Layout";
  import { Markdown } from "../components/styles/Markdown";
  import Content, { HTMLContent } from "../components/Content";
  
  export const AboutPageTemplate = ({ title, content, contentComponent }) => {
    const PageContent = contentComponent || Content;
  
    return (
      <section>
        <h1>{title}</h1>
        <Markdown>
          <PageContent content={content} />
        </Markdown>
      </section>
    );
  };
  
  AboutPageTemplate.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string,
    contentComponent: PropTypes.func
  };
  
  const AboutPage = ({ data }) => {
    const { markdownRemark: post } = data;
  
    return (
      <Layout>
        <Helmet title={`${post.frontmatter.title} | Atlantic Football League`} />
        <AboutPageTemplate
          contentComponent={HTMLContent}
          title={post.frontmatter.title}
          content={post.html}
        />
      </Layout>
    );
  };
  
  AboutPage.propTypes = {
    data: PropTypes.object.isRequired
  };
  
  export default AboutPage;
  
  export const aboutPageQuery = graphql`
    query AboutPage($id: String!) {
      markdownRemark(id: { eq: $id }) {
        html
        frontmatter {
          title
        }
      }
    }
  `;
  