<template>
  <Parent
    v-bind="{ ...$props, ...getAttrs($attrs) }"
    :image="image"
    :scaffold-overrides="cardOverrides"
  />
</template>

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

import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'UserCard',
  components: { Parent },
  props: {
    image: {
      type: String
    }
  },
  methods: {
    getAttrs,
    cardOverrides(data, { replaceItem, deleteItems }) {
      replaceItem('function', {
        id: 'sites',
        children: this.getCheckedData(data, ['sites', 'data'], []).map(
          ({ title }) => ({
            value: title
          })
        )
      })

      deleteItems('phone')
    }
  }
}
</script>
