import React from "react"
import Link from 'gatsby-link'
import Helmet from "react-helmet"
import styled from "styled-components"
import g from "glamorous";
import 'antd-mobile/dist/antd-mobile.css';
import { rhythm } from "../utils/typography";

import config from "../../data/SiteConfig"
import MainHeader from '../components/Layout/Header'
import About from '../components/About/About'

const BodyContainer = styled.div`
  padding: ${props => props.theme.sitePadding};
`

export default class MobilePage extends React.Component {
  render() {
    const props = this.props;
    const data = props.data;
    return (
      <div className="index-container">
        <Helmet title={config.siteTitle} />
        <main>
          <MainHeader
            siteTitle={config.siteTitle}
            siteDescription={config.siteDescription}
            location={props.location}
            logo={config.siteLogo}
          />
          <div>
          {data.examples.edges.map(({ node }) => (
            <div key={node.id}>
              <g.H3 marginBottom={rhythm(1 / 4)}>
                {node.frontmatter.title}{" "}
              </g.H3>
              <p>{node.excerpt}</p>
            </div>
          ))}
          </div>
          <BodyContainer>
            <About />
          </BodyContainer>
        </main>
      </div>
    );
  }
}

/* eslint no-undef: "off"*/
export const pageQuery = graphql`
  query IndexQuery {
    code: allExampleCode {
      edges {
        node {
          id
          internal {
            contentDigest
          }
        }
      }
    }
    examples: allMarkdownRemark(
      filter: {id: {regex: "//cicada/examples//"}}
    ) {
      edges {
        node {
          id
          frontmatter {
            title
          }
          excerpt
        }
      }
    }
  }
`;