import React from "react"
import { Link , graphql , useStaticQuery } from "gatsby"
import Layout from "../components/layout"
import Button from '@material-ui/core/Button';

const IndexPage = () => {
   const data = useStaticQuery(graphql`
      query getPost {
         swapi {
            posts {
               title
               description
               created_at
               id
            }
         }
      }
   `)
   return (
      <Layout>
      <Button variant="contained" color="primary">
            Hello World
         </Button>
       {
          data.swapi.posts.map(post => <div key={post.id}>
            <Link to={`/post/${post.id}`}>
             <h1>{post.title}</h1>
            </Link>
             <h1>{post.description}</h1>
          </div>)
       }
      </Layout>
    )
}

export default IndexPage