import Layout from '../../../components/layout'
import Items from '../../../components/items'
import { useRouter } from 'next/router'
import { getGetServerSideProps } from '../../../api/ssrApollo'
import { TOP_ITEMS } from '../../../fragments/items'
import TopHeader from '../../../components/top-header'

export const getServerSideProps = getGetServerSideProps(TOP_ITEMS)

export default function Index ({ data: { topItems: { items, cursor } } }) {
  const router = useRouter()

  return (
    <Layout>
      <TopHeader cat='posts' />
      <Items
        items={items} cursor={cursor}
        query={TOP_ITEMS}
        destructureData={data => data.topItems}
        variables={{ sort: router.query.sort, when: router.query.when }} rank
      />
    </Layout>
  )
}