import Layout from '../../components/layout'
import { getGetServerSideProps } from '../../api/ssrApollo'
import TopHeader from '../../components/top-header'
import { TOP_COWBOYS } from '../../fragments/users'
import { useQuery } from '@apollo/client'
import MoreFooter from '../../components/more-footer'
import UserList, { UsersSkeleton } from '../../components/user-list'

export const getServerSideProps = getGetServerSideProps(TOP_COWBOYS)

export default function Index ({ data: { topCowboys: { users, cursor } } }) {
  const { data, fetchMore } = useQuery(TOP_COWBOYS)

  if (data) {
    ({ topCowboys: { users, cursor } } = data)
  }

  return (
    <Layout>
      <TopHeader cat='cowboys' />
      <UserList users={users} />
      <MoreFooter cursor={cursor} fetchMore={fetchMore} Skeleton={UsersSkeleton} />
    </Layout>
  )
}