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

export default function Categories({ data }) {
	var siteMetadata = data.site.siteMetadata;
	var categoryListItems = data.allMarkdownRemark.group.map(function(category) {
		return (
			<li><a href={'/categories/' + category.name}>{category.name} ({category.totalCount})</a></li>
		);
	});

    return (
		<Page headerInfo={siteMetadata} pageTitle="Categories">
		<p>Browse posts by category.</p>
			<ul>
				{categoryListItems}
			</ul>
		</Page>
	)
}

export const pageQuery = graphql`
    query {
    	allMarkdownRemark {
    		group(field: frontmatter___categories) {
				name: fieldValue
				totalCount
    		}
		}
		site {
			...HeaderInfo
		}
	}
`;