<template>
  <Card
    :scaffold-overrides="scaffoldOverrides"
    :image="$_getContentImage(image)"
    v-bind="$attrs"
  />
</template>

<script>
import Card from '@inside-users/components/lib/Card'

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

export default {
  name: 'user-card',
  components: {
    Card,
    Link,
    IconText
  },
  props: {
    image: {
      type: String,
      default: ''
    }
  },
  methods: {
    scaffoldOverrides(data, { addItemAfter }) {
      addItemAfter('function', {
        id: 'email',
        tag: Link,
        data: {
          href: `mailto:${data.email}`,
          external: true,
          icon: null,
          color: '#EA6C61'
        },
        value: data.email
      })
      addItemAfter('phone', {
        id: 'site',
        tag: IconText,
        data: { icon: 'pin' },
        value: this.getCheckedData(data.sites, ['data', 0, 'title']),
        hideIf: () => !this.getCheckedData(data.sites, ['data', 0, 'title'])
      })
    }
  }
}
</script>
