<template>
  <Link
    :href="experienceHref"
    :inline="false"
    class="experience-catalog-item-container"
  >
    <div class="background-container">
      <div class="img-container">
        <img
          :src="
            $_getContentImage(heritedData.image || defaultImage, 'image-card')
          "
          :alt="`Image de l'experience ${heritedData.title} `"
        />
      </div>
    </div>

    <div>
      <Title tag="h5" class="my-s">
        {{ heritedData.title }}
      </Title>

      <BaseText>
        {{ subtitle }}
      </BaseText>
    </div>
  </Link>
</template>

<script>
import { Title, BaseText } from 'inside-collection/atoms'

import { Link } from 'inside-collection/components'

import { insertIf } from '@inside-library/helpers/Arrays'

import { formatHref } from '@inside-library/helpers/Langs'
export default {
  name: 'experiences-catalog-item',
  components: {
    Title,
    BaseText,
    Link
  },
  computed: {
    experienceHref() {
      return formatHref(
        { name: 'ExperiencePage', params: { slug: this.heritedData.slug[0] } },
        this.$_currentLang
      )
    },
    subtitle() {
      const date = this.getCheckedData(this.heritedData, [
        'year',
        'data',
        0,
        'title'
      ])

      return [
        ...insertIf(!!date, date),
        ...this.getCheckedData(
          this.heritedData,
          ['experience_categories', 'data'],
          []
        ).map(({ title }) => title)
      ].join(' - ')
    },
    defaultImage() {
      return this.getCheckedData(this.heritedData, [
        'experience_categories',
        'data',
        0,
        'image'
      ])
    }
  }
}
</script>
