import { SearchLayout } from '../../components/layout'
import { getGetServerSideProps } from '../../api/ssrApollo'
import { useRouter } from 'next/router'
import { SUB_SEARCH } from '../../fragments/subs'
import Down from '../../svgs/arrow-down-line.svg'
import Items from '../../components/items'

export const getServerSideProps = getGetServerSideProps(SUB_SEARCH, null,
  (data, vars) => vars.sub && !data.sub)

export default function Index ({ ssrData }) {
  const router = useRouter()
  const variables = { ...router.query }

  return (
    <SearchLayout sub={variables.sub}>
      {variables.q
        ? <Items
            ssrData={ssrData}
            query={SUB_SEARCH}
            destructureData={data => data.search}
            variables={variables}
            noMoreText='NO MORE'
          />
        : (
          <div className='text-muted text-center mt-5' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>
            <Down width={22} height={22} className='me-2' />search for something<Down width={22} height={22} className='ms-2' />
          </div>)}
    </SearchLayout>
  )
}