<template>
  <Block :title="$_tr('title')" title-tag="h3" class="mt-xl">
    <component-listing
      id="referents-listing"
      direction="vertical"
      :static-data="referents"
      :pagination="false"
    >
      <template #default="{ item }">
        <CardUser
          v-bind="item"
          :key="item.uuid"
          :image="$_getContentImage(item.image, 'avatar')"
          :scaffold-overrides="cardOverrides"
        />
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

import CardUser from '@inside-users/components/lib/Card'

export default {
  name: 'ExperienceReferents',
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE.REFERENTS',
  components: { Block, CardUser },
  props: {
    referents: {
      type: Array,
      required: true
    }
  },
  methods: {
    cardOverrides(data, { addItemAfter }) {
      addItemAfter('name', {
        id: 'business',
        value: data.business.data.map(({ title }) => title).join(', ')
      })
      addItemAfter('phone', {
        value: data.email,
        class: 'email'
      })
    }
  }
}
</script>
