import BookListItem from '@/components/BookListItem/BookListItem'
import Grid from '@/components/Grid/Grid'
import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
import { getStaticEntries } from '@/lib/content'
import { NextSeo } from 'next-seo'

export const Title = 'Library'

export const getStaticProps = () => {
  const bookEntries = getStaticEntries('./content/books')
    .sort((a, b) => {
      return b.attributes.readDate - a.attributes.readDate
    });

  return {
    props: {
      // Silliness to make sure dates don't get passed to the 
      // page function below as [object Object]
      bookEntries: JSON.parse(JSON.stringify(bookEntries))
    }
  }
}

export default function Library({ bookEntries }) {
  return (
    <DefaultLayout>
      <NextSeo
        title={Title}
        openGraph={
          {
            title: Title
          }
        }
      />

      <h1>{Title}</h1>

      <section>
        <Grid columns={5}>
          {bookEntries.map((entry, _) => (
            <BookListItem key={entry.attributes.title} {...entry.attributes} href={`/library/${entry.slug}`} />
          ))}
        </Grid>
      </section>
    </DefaultLayout>
  )
}