<template>
  <div class="entity-links-container mt-l">
    <Link v-if="website" :href="website" :inline="false">
      <IconText :color="$_theme('colorPrimary')" icon="globe">
        {{ website }}
      </IconText>
    </Link>

    <Link v-if="facebook" :href="facebook" :inline="false">
      <IconText :color="$_theme('colorPrimary')" icon="facebook">
        {{ $_tr('facebook') }}
      </IconText>
    </Link>

    <Link v-if="twitter" :href="twitter" :inline="false">
      <IconText :color="$_theme('colorPrimary')" icon="twitter">
        {{ $_tr('twitter') }}
      </IconText>
    </Link>

    <Link v-if="linkedin" :href="linkedin" :inline="false">
      <IconText :color="$_theme('colorPrimary')" icon="linkedin">
        {{ $_tr('linkedin') }}
      </IconText>
    </Link>

    <Link v-if="instagram" :href="instagram" :inline="false">
      <IconText :color="$_theme('colorPrimary')" icon="instagram">
        {{ $_tr('instagram') }}
      </IconText>
    </Link>
  </div>
</template>

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

export default {
  name: 'EntityLinks',
  $_i18nRootPath: 'customs.ENTITY.LINKS',
  components: {
    IconText,
    Link
  },
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      website: this.fetchedData.website,
      facebook: this.fetchedData.facebook,
      twitter: this.fetchedData.twitter,
      linkedin: this.fetchedData.linkedin,
      instagram: this.fetchedData.instagram
    }
  }
}
</script>

<style lang="scss">
.entity-links-container {
  a {
    display: flex;
    margin-bottom: var(--spacing-m);
  }
}
</style>
