<template>
  <Slider
    :news="news"
    :use-fetch="false"
    :slider-options="sliderOptions"
    class="space-news-slider mb-xl"
  >
    <template #default="{ item }">
      <Capsule v-bind="item" :key="item.uuid" size="small" />
    </template>
  </Slider>
</template>

<script>
import Slider from '@inside-news/components/lib/Slider'

import Capsule from '../news/CapsuleNews'

export default {
  name: 'SpaceNewsSlider',
  $_i18nRootPath: 'customs.SPACES.newsSlider',
  components: { Slider, Capsule },
  props: {
    news: {
      type: Array
    }
  },
  computed: {
    sliderOptions() {
      return {
        title: this.$t(
          'customs.SPACES.newsSlider.title',
          this.$store.getters.getCurrentLang
        ),
        border: true,
        titleTag: 'h3'
      }
    }
  }
}
</script>
