import React from "react";
import { Container } from "reactstrap";
import { Helmet } from "react-helmet";
import Layout from "../../components/Layout";

import tagsdata from "../../admin-config/tagslist.yml";
import { kebabCase } from "lodash";
import { Link, graphql } from "gatsby";

import "../../sass/category.sass";

const TagsPage = ({ data }) => {
  return (
    <Layout>
      <section className="section">
        <Helmet title={`Categories | ${data.site.siteMetadata.title}`} />
        <div className="category-list-container mt-5">
          <h1>Categories</h1>
          <div className="category-list mt-4">
            {tagsdata.tagslist.map((tag) => (
              <Link
                to={"/categories/" + kebabCase(tag.name)}
                style={{
                  backgroundImage: `url('${tag.image}')`,
                }}
                className="category-list-category"
              >
                <h1 className="category-heading">{tag.name}</h1>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </Layout>
  );
};

export default TagsPage;

export const categoriesListQuery = graphql`
  query TagsQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

// const TagsPage = ({
//   data: {
//     allMarkdownRemark: { group },
//     site: {
//       siteMetadata: { title },
//     },
//   },
// }) => (
//   <Layout>
//     <section className="section">
//       <Helmet title={`Tags | ${title}`} />
//       <div className="container content">
//         <div className="columns">
//           <div
//             className="column is-10 is-offset-1 mt-5 mb-3"
//             style={{ marginBottom: "6rem" }}
//           >
//             <h1 className="title is-size-2 is-bold-light">Categories</h1>
//             <ul className="taglist ml-3">
//               {group.map((tag) => (
//                 <li key={tag.fieldValue}>
//                   <Link to={`/categories/${kebabCase(tag.fieldValue)}/`}>
//                     {tag.fieldValue} ({tag.totalCount})
//                   </Link>
//                 </li>
//               ))}
//             </ul>
//           </div>
//         </div>
//       </div>
//     </section>
//   </Layout>
// );

// export default TagsPage;

// export const tagPageQuery = graphql`
//   query TagsQuery {
//     site {
//       siteMetadata {
//         title
//       }
//     }
//     allMarkdownRemark(limit: 1000) {
//       group(field: frontmatter___tags) {
//         fieldValue
//         totalCount
//       }
//     }
//   }
// `;