<template>
  <Block v-if="fetchedData.length">
    <Slider
      :border="true"
      :data="fetchedData"
      :title="$_tc('title', ['RH'])"
      title-tag="h3"
    >
      <template #default="{ item }">
        <Capsule
          v-bind="item"
          :key="item.uuid"
          :to="{ name: 'NewsPage', params: { slug: item.slug[0] } }"
          :uuid="item.uuid"
          size="half"
        />
      </template>
    </Slider>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import Capsule from '@inside-news/components/lib/Capsule'
import Slider from '@inside-slideshow/components/lib/Slider'

export default {
  name: 'SpacesNews',
  $_i18nRootPath: 'customs.SPACES.NEWS',
  components: { Capsule, Block, Slider },
  props: {
    fetchedData: {
      type: Array,
      required: true
    }
  }
}
</script>
