import React, { Component } from 'react';
import styled from 'styled-components'
import Tabletop from 'tabletop';

class Explore extends Component {
     constructor() {
        super()
        this.state = {
          data: []
        }
      }

      componentDidMount() {
        Tabletop.init({
	  key: '1x-hA3Bd5yXZ2ciSImRUZBd28Uxn7-9cZrFfsdVLpB64',
          callback: googleData => {
            this.setState({
	      data: googleData
            })
          },
	  simpleSheet: true,
	  orderby: 'Category'
        })
      }
      render() {
        const { data } = this.state
        return (
          <SectionContent>
            {
	      data.map(obj => {
                return (
                  <Article key={obj.title}>
                    <img alt={obj.imgAlt} src={obj.imgUrl} />
                    <Tag>{obj.category}</Tag>
		    <Title>{obj.title}</Title>
		    <Link href={obj.linkUrl}>Read</Link>
                  </Article>
                )
              })
            }
          </SectionContent>
        );
    }
}

export default Explore