<template>
  <component-listing
    id="clubs-listing"
    endpoint="content/clubs"
    :pagination="false"
    :filters="requestFilters"
  >
    <template #default="{ item }">
      <Link
        :href="{ name: 'ClubsPage', params: { slug: item.slug[0] } }"
        :inline="false"
      >
        <CardImageWithEdition
          v-bind="item"
          :key="item.uuid"
          :image="$_getContentImage(item.banner, 'image-section')"
          :size="cardSize"
          radius="s"
        />
      </Link>
    </template>
  </component-listing>
</template>

<script>
import { CardImage, Link } from 'inside-collection/components'

import { withEdition } from '@inside-edition/hocs'

export default {
  name: 'ClubsListing',
  components: {
    CardImageWithEdition: withEdition(CardImage),
    Link
  },
  props: {
    fractions: {
      type: Number,
      default: 3
    },
    cardSize: {
      type: String,
      default: 'xs'
    }
  },
  data() {
    return {
      requestFilters: {
        'status:eq': 1,
        'is_featured:eq': 0,
        sort: 'title:asc'
      }
    }
  }
}
</script>
