import Layout from "../components/main"
import Link from 'next/link'

export async function getStaticProps(context) {
  const res = await fetch(`http://localhost:8000/api/collections/1`)
  const artdata = await res.json()

  const secres = await fetch(`http://localhost:8000/api/sections`)
  const secdata = await secres.json()
  
  return {
      props: { articles: artdata, sections : secdata }, // will be passed to the page component as props
  }
}

function HomePage ({articles, sections}) {
    return (<Layout sections={sections}>
      {articles.articles.map((article) =>  (
        <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
      ))}
    </Layout>);
}
  
export default HomePage