<template>
  <a-avatar :customClass="customClass" :shape="shape" :size="size" v-if="src">
    <img alt="avatar" :src="src" />
  </a-avatar>
  <a-avatar :customClass="customClass" :shape="shape" :size="size" v-else-if="text">
    {{ showText }}
  </a-avatar>
  <a-avatar :customClass="customClass" :shape="shape" :size="size" v-else>
    <IconUser />
  </a-avatar>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue'
import { IconUser } from '@arco-design/web-vue/es/icon'

const props = withDefaults(
  defineProps<{
    customClass?: string
    shape?: 'circle' | 'square'
    size?: number
    text?: string
    firstText?: boolean
    src?: string
  }>(),
  {
    shape: 'square',
    text: '',
    firstText: true,
    size: 20
  }
)
const showText = computed(() => {
  if (!props.text) {
    return ''
  }
  return props.firstText ? props.text.substring(0, 1) : props.text
})
</script>

<style scoped></style>
