import React from 'react';
import { Flex, Box, Heading } from 'rebass';
import { Helmet } from 'react-helmet';

import { storeName } from '../../config/gatsbystorefront-config';

const BlogPage = props => {
  const { title, body } = props.data.policies.nodes[0];
  return (
    <Flex flexWrap="wrap" px={2} pt={3} mx="auto" style={{ maxWidth: 1300 }}>
      <Helmet title={title} titleTemplate={`%s — ${storeName}`} defer={false}>
        <meta name="description" content={title} />
      </Helmet>
      <Heading as="h1" fontSize={[30, 36, 42]} my={3}>
        {title}
      </Heading>
      <Box dangerouslySetInnerHTML={{ __html: body }}></Box>
    </Flex>
  );
};

export default BlogPage;

/*import React from 'react';
import GatsbyLink from 'gatsby-link';
import { Flex, Box, Text, Heading } from 'rebass';

import Pagination from '../../components/Pagination';
import substrDescription from '../../utils/substrDescription.js';

const BlogPage = ({ blogTitle, ...props }) => {
  return (
    <Flex
      flexDirection="column"
      px={2}
      pt={3}
      mx="auto"
      style={{ maxWidth: 1300 }}
      alignItems="center"
    >
      <Heading as="h1" fontSize={[30, 36, 42]} m={3}>
        {blogTitle}
      </Heading>

      {props.data.articles.nodes.map(article => {
        let {
          shopifyId,
          title,
          excerpt,
          content,
          publishedAt,
          fields: { shopifyThemePath },
        } = article;

        return (
          <Flex
            key={shopifyId}
            flexDirection="column"
            sx={{
              maxWidth: '800px',
              width: [370, '100%'],
              mx: 3,
              my: 3,
            }}
          >
            <Box my={2}>
              <Heading
                as={GatsbyLink}
                to={shopifyThemePath}
                variant="link"
                fontSize={[30, 36]}
              >
                {title}
              </Heading>
            </Box>
            <Box fontSize={2}>{publishedAt}</Box>
            <Box>{excerpt ? excerpt : substrDescription(content, 500)}</Box>
          </Flex>
        );
      })}
      <Box width={1} px={4} py={2} key="pagination">
        <Text textAlign="center">
          <Pagination {...props.pageContext} />
        </Text>
      </Box>
    </Flex>
  );
};

export default BlogPage;*/