<template>
  <div class="procedure-slider-item-container px-l py-xl" @click="handleClick">
    <date-ui v-if="updatedAt" :date="updatedAt" />

    <Title tag="h5">
      {{ $_tr('titleUpdate', [title]) }}
    </Title>
  </div>
</template>

<script>
import { triggerProcedureLink } from '../helpers'

import { Title, BaseText, Icon } from 'inside-collection/atoms'
import { Card } from 'inside-collection/components'

export default {
  name: 'ProcedureSliderItem',
  $_i18nRootPath: 'customs.PROCEDURES.SLIDER',
  components: {
    Title,
    BaseText,
    Icon,
    Card
  },
  props: {
    uuid: {
      type: String
    },
    title: {
      type: String
    },
    updatedAt: {
      type: Number
    },
    contentType: {
      type: String
    },
    slug: {
      type: Array
    }
  },
  methods: {
    handleClick() {
      triggerProcedureLink(this, {
        slug: this.slug[0],
        contentType: this.contentType
      })
    }
  }
}
</script>

<style lang="scss">
.procedure-slider-item-container {
  cursor: pointer;

  .date-ui-container {
    color: var(--color-text-light);
    font-size: var(--font-size-labor);
  }
}
</style>
