import React, { Component } from 'react'
import Helmet from 'react-helmet'
import Prism from 'prismjs'

require('prismjs/themes/prism-solarizedlight.css')

import PageTransition from 'gatsby-plugin-page-transitions'

class PostDefault extends Component {
  componentDidMount() {
    Prism.highlightAll()
  }
  render() {
    const { data } = this.props
    return (
      <PageTransition>
        <Helmet
          title={`${data.wordpressPost.title} - Saburly.com`}
          meta={[
            { name: 'description', content: 'We code & design great software' },
            {
              name: 'keywords',
              content:
                'software, design, coding, programming, code, consulting',
            },
          ]}
        />
        <main className="container mx-auto p-4 sm:p-10">
          <h1>Specific Post - {data.wordpressPost.title}</h1>
          <div
            dangerouslySetInnerHTML={{
              __html: data.wordpressPost.content,
            }}
          />
        </main>
      </PageTransition>
    )
  }
}

export const query = graphql`
  query PostDefaultQuery($slug: String!) {
    wordpressPost(slug: { eq: $slug }) {
      title
      slug
      content
    }
  }
`

export default PostDefault