<template>
  <Block
    v-if="fetchedData.length"
    :title="$_tr('title')"
    :link="{ name: 'OffersListingPage' }"
    :link-label="$_tr('moreOffers')"
    title-tag="h3"
    class="home-offers-listing"
  >
    <component-listing
      id="homepage-offers-listing"
      :static-data="fetchedData"
      :pagination="false"
      :grid-gap="$_theme('spacingXl')"
      :fractions="1"
      direction="vertical"
    >
      <template #default="{ item }">
        <Resume
          :key="item.uuid"
          v-bind="item"
          :to="{
            name: 'OfferPage',
            params: { slug: item.slug[0] }
          }"
          :image="
            item.image ? item.image : item.offers_categories.data[0].image
          "
        />
      </template>

      <template #no-data>
        {{ $_tr('empty') }}
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

import Resume from '../offers/Resume'

export default {
  name: 'HomeOffersListing',
  $_i18nRootPath: 'customs.HOMEPAGE.offers',
  components: { Block, Resume },
  props: {
    fetchedData: {
      type: Array
    }
  }
}
</script>
