<script setup>
const props = defineProps({
  size: {
    type: [String, Number],
    default: 40,
  },
  gender: {
    type: String,
    default: '',
    validator: (value) => ['male', 'female', ''].includes(value.toLowerCase()),
  },
  profileImageUrl: {
    type: String,
    default: '',
  },
  class: {
    type: [String, Object, Array],
    default: '',
  },
})

const avatarSource = computed(() => {
  if (props.profileImageUrl) {
    return props.profileImageUrl
  }

  switch (props.gender.toLowerCase()) {
    case 'male':
      return null // Gunakan slot default untuk v-icon
    case 'female':
      return null // Gunakan slot default untuk v-icon
    default:
      return null // Gunakan slot default untuk v-icon
  }
})

const avatarIcon = computed(() => {
  if (!props.profileImageUrl) {
    switch (props.gender.toLowerCase()) {
      case 'male':
        return 'mdi-face-man'
      case 'female':
        return 'mdi-face-woman'
      default:
        return 'mdi-emoticon-confused'
    }
  }
  return null
})
</script>

<template>
  <v-avatar :size="size" color="primary" :class="class">
    <img v-if="avatarSource" :src="avatarSource" :alt="`Avatar`" />
    <v-icon
      v-else-if="avatarIcon"
      :size="Math.max(Number(size) * 0.66, 20)"
      color="white"
    >
      {{ avatarIcon }}
    </v-icon>
    <slot v-else name="fallback">
      <v-icon :size="Math.max(Number(size) * 0.66, 20)" color="white">
        mdi-account-circle
      </v-icon>
    </slot>
  </v-avatar>
</template>
