import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid } from '@chakra-ui/react'
import directus from '~/lib/directus'

const PER_PAGE = 50

async function getVendors(page = 1) {
  return directus.items('vendors').readByQuery({
    fields: [
      //
      '*',
    ],
    limit: PER_PAGE,
    page,
    meta: ['filter_count'],
  })
}

export default async function VendorsPage({ params }) {
  const { data: vendors, meta } = await getVendors()

  return (
    <div>
      <Heading size="lg" my={8}>
        Vendors <small>({meta.filter_count} total)</small>
      </Heading>
      <SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
        {vendors.map((v) => (
          <LinkBox as={Card} rounded={4}>
            <Image
              roundedTop={4}
              objectFit="cover"
              src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
              alt="Chakra UI"
            />
            <CardBody>
              <LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
                {v.name}
              </LinkOverlay>
            </CardBody>
          </LinkBox>
        ))}
      </SimpleGrid>
    </div>
  )
}