import * as React from 'react'
import { graphql, PageProps } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Seo from '../components/seo'

import { Section } from '../components/shared'

import type { PostNode, PageContext } from '../types'

const StyledMarkdown = styled.div`
  color: rgb(102, 102, 102);
  h2,
  h3,
  h4,
  strong {
    color: rgb(34, 34, 34);
  }
  h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family:
      'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
      sans-serif;
  }
`

interface MarkdownPageData {
  markdownRemark: PostNode
}

const MarkdownPageTemplate: React.FC<
  PageProps<MarkdownPageData, PageContext>
> = ({ data, location }) => {
  const { frontmatter, html } = data.markdownRemark
  return (
    <Layout
      location={location}
      heading={frontmatter.heading}
      desc={frontmatter.desc}
    >
      <Section color="black" bgColor="white" bottomArrow={false}>
        <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />
      </Section>
    </Layout>
  )
}

export default MarkdownPageTemplate

export const Head: React.FC<{ data: MarkdownPageData }> = ({ data }) => (
  <Seo title={data.markdownRemark.frontmatter.title} />
)

export const pageQuery = graphql`
  query ($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        heading
        desc
      }
    }
  }
`