import React, { Component } from 'react'
import Helmet from 'react-helmet'
import Prism from 'prismjs'
import SEO from '../components/SEO'

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

import PageTransition from 'gatsby-plugin-page-transitions'
import favicon32 from '../images/favicon32.png'

class PostDefault extends Component {
  componentDidMount() {
    Prism.highlightAll()
  }
  componentDidUpdate() {
    Prism.highlightAll()
  }
  render() {
    const { data } = this.props
    return (
      <PageTransition>
        <SEO
          postSEO
          siteTitle={data.wordpressPost.title}
          siteDescription="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions"
          siteImage={data.wordpressPost.featured_media.source_url}
          siteUrl={`https://www.saburly.com/blog/${data.wordpressPost.slug}`}
        />
        <Helmet
          link={[
            { rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <div className="text-center">
          <img
            className="w-full container mx-auto mt-10 rounded"
            src={
              data.wordpressPost.featured_media
                ? data.wordpressPost.featured_media.source_url
                : ''
            }
          />
        </div>
        <main className="container mx-auto p-4 max-w-lg sm:px-10">
          <h1 className="mt-4">{data.wordpressPost.title}</h1>  
          <div className="flex mx-auto text-black mt-1 opacity-70">
            {data.wordpressPost.author.name && <address className="author text-sm m-1 font-bold roman author-name">{data.wordpressPost.author.name}</address> }
            {data.wordpressPost.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{data.wordpressPost.date}</time> }
          </div>

          <div
            className="leading-normal blog-post font-serif"
            dangerouslySetInnerHTML={{
              __html: data.wordpressPost.content,
            }}
          />
        </main>
      </PageTransition>
    )
  }
}

//export const query = graphql`
  //query PostDefaultQuery($slug: String!) {
    //wordpressPost(slug: { eq: $slug }) {
      //title
      //slug
      //content
      //author {
        //name
      //}
      //date(formatString: "MMMM DD, YYYY")
      //featured_media {
        //source_url
      //}
    //}
  //}
//`

export default PostDefault
