<template>
  <v-avatar :size="size" :class="avatarClass">
    <v-img
      v-if="src"
      :src="src"
      :alt="alt"
      :lazy-src="defaultAvatar"
    ></v-img>
    <v-img
      v-else
      :src="defaultAvatar"
      :alt="alt"
    ></v-img>
  </v-avatar>
</template>

<script setup>
import { DEFAULT_AVATAR } from '@/constants/avatar'

const props = defineProps({
  src: {
    type: String,
    default: null
  },
  alt: {
    type: String,
    default: 'User Avatar'
  },
  size: {
    type: [Number, String],
    default: 44
  },
  avatarClass: {
    type: String,
    default: ''
  }
})

const defaultAvatar = DEFAULT_AVATAR
</script>
