import React from "react"
import { graphql } from "gatsby"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faHome, faDollarSign } from "@fortawesome/free-solid-svg-icons"
import { faTwitter } from "@fortawesome/free-brands-svg-icons"

import CosmicIcon from "../cosmic-icon.svg"
import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({ data, location }) => {
  const site = data.markdownRemark
  const siteTitle = data.site.siteMetadata.title
  const homePage = site.frontmatter.homepage
  const twitter = site.frontmatter.twitter
  const pricingLink = site.frontmatter.pricing
  const cosmicAppLink = site.frontmatter.cosmicapplink

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={site.frontmatter.title}
        description={site.frontmatter.description || site.excerpt}
      />
      <article>
        <h2 className="text-3xl font-black mb-4">{site.frontmatter.title}</h2>
        <div className="inline-flex">
          <a
            href={homePage}
            target="_blank"
            rel="noreferrer"
            className="shadow-none mr-4 hover:text-green-600"
          >
            <FontAwesomeIcon icon={faHome} className="mr-1" />
            <span className="text-black">Home Page</span>
          </a>
          { 
            twitter &&
            <a
              href={`https://twitter.com/${twitter}`}
              target="_blank"
              rel="noreferrer"
              className="shadow-none mr-4 hover:text-blue-600"
            >
              <FontAwesomeIcon icon={faTwitter} className="mr-1" />
              <span className="text-black">Twitter</span>
            </a>
          }
          <a
            href={pricingLink}
            target="_blank"
            rel="noreferrer"
            className="shadow-none mr-4 hover:text-purple-800"
          >
            <FontAwesomeIcon icon={faDollarSign} className="mr-1" />
            <span className="text-black">Pricing</span>
          </a>
        </div>
        {cosmicAppLink && (
          <div className="flex mt-4">
            <a
              className="px-6 py-3 bg-blue-500 text-white shadow-none flex items-center justify-center hover:bg-blue-600"
              href={cosmicAppLink}
              target="_blank"
              rel="noreferrer"
            >
              <img
                src={CosmicIcon}
                width="25"
                className="mr-2 m-0"
                alt="Cosmic Icon"
              />
              Deploy Cosmic Starter
            </a>
          </div>
        )}
        <section
          className="markdown mt-6"
          dangerouslySetInnerHTML={{ __html: site.html }}
        />
      </article>
    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query SingleSiteBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        description
        homepage
        twitter
        cosmicapplink
        pricing
      }
    }
  }
`