<template>
  <Link :href="link" :inline="false" class="compliance-container">
    <CardImage
      :image="$_getContentImage(picture)"
      :title="text"
      :alt="$_tr('altImg')"
    />
  </Link>
</template>

<script>
import defaultPicture from '../../assets/img/compliance/compliance.jpg'

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

export default {
  name: 'Compliance',
  $_i18nRootPath: 'customs.HOME_PAGE.COMPLIANCE',
  components: {
    Link,
    CardImage
  },
  computed: {
    text() {
      return this.getStore('getInsideSettings', 'compliance.compliance_text')
    },
    picture() {
      return this.getStore('getInsideSettings', 'compliance.compliance_picture')
    },
    link() {
      return this.getStore(
        'getInsideSettings',
        'compliance.compliance_redirection'
      )
    },
    style() {
      return {
        backgroundImage: `url('${this.picture || defaultPicture}')`
      }
    }
  }
}
</script>

<style lang="scss">
.compliance-container .ds-card-image-container {
  max-height: 218px;
}
</style>
