<template>
  <Capsule
    v-bind="getAttrs($attrs)"
    :staggered="true"
    :to="{
      name: 'NewComersPage',
      params: { slug: slug[0] }
    }"
    :scaffold-overrides="scaffoldOverrides"
    size="s"
  />
</template>

<script>
import { getAttrs } from '@inside-library/helpers/Attrs'

import Capsule from '@inside-news/components/lib/Capsule'

export default {
  name: 'CapsuleNewComers',
  components: { Capsule },
  props: {
    slug: {
      type: Array,
      required: true
    },
    date: {
      type: Number,
      required: true
    }
  },
  methods: {
    getAttrs,
    scaffoldOverrides(fields, { replaceItem }) {
      replaceItem('date', {
        id: 'date',
        tag: 'date-ui',
        data: { date: this.date, format: 'lll' }
      })
    }
  }
}
</script>
