import React from "react";
import { graphql } from "gatsby";
import Page from "../templates/page";

export default function Home({ data }) {
	const post = data.allMarkdownRemark.edges[0].node;
	const siteMetadata = data.site.siteMetadata;

	var tags = post.frontmatter.tags.map((tag) => {
		return (<a key={tag} href={'/tags/' + tag}>#{tag}</a>);
	});
	var categories = post.frontmatter.categories.map((category) => {
		return (<a key={category} href={'/categories/' + category}>{category}</a>);
	});

	return (
		<Page headerInfo={siteMetadata}>
			<article className="post">
				<h1 className="post-title">{post.frontmatter.title}</h1>
				<div className="post-info d-flex justify-content-start">
					<time dateTime={post.frontmatter.isoDate} className="post-date">
						{post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
					</time>
					<nav className="post-tags">
						{tags}
					</nav>
					<nav className="post-categories">
						<span>posted in:</span>
						{categories}
					</nav>
				</div>
				<div dangerouslySetInnerHTML={{ __html: post.html }} />
			</article>
			<section>
				<a href={post.fields.slug + "#comments-section"}>
					See comments
          		</a>
			</section>
		</Page>
	);
}

export const query = graphql`
  query {
    allMarkdownRemark(limit: 1, sort: {fields: frontmatter___date, order: DESC}) {
		edges {
			node {
				html
				frontmatter {
					title
					formattedDate: date(formatString: "ddd MMM Do YYYY")
					isoDate: date(formatString: "")
					fromNowDate:date(fromNow:true)
					categories
					tags
				}
				fields {
					slug
				}
			}
		}
    }
    site {
		...HeaderInfo
    }
  }
`