<template>
  <LinkWithEdition
    v-if="data.image"
    v-bind="data"
    :href="data.link"
    :inline="false"
    class="home-card-link-container"
  >
    <img
      :src="$_getContentImage(data.image, 'banner-home')"
      :alt="$_tr('altCardImage')"
    />
  </LinkWithEdition>
</template>

<script>
import { Link } from 'inside-collection/components'

import { withEdition } from '@inside-edition/hocs'

export default {
  name: 'HomeCardLink',
  $_i18nRootPath: 'customs.HOMEPAGE.cardLink',
  components: { LinkWithEdition: withEdition(Link) },
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
.home-card-link-container {
  max-height: 280px;
  overflow: hidden;
}
</style>
