<template>
  <div class="avatar">
    <div
      class="rounded-full overflow-hidden flex items-center justify-center shrink-0"
      :style="{ width: `${size}px`, height: `${size}px` }"
    >
      <img
        v-if="email && !gravatarError"
        :src="useGravatarUrl(email, size)"
        alt=""
        class="w-full h-full object-cover"
        loading="lazy"
        @error="gravatarError = true"
      >
      <div
        v-else
        class="bg-primary text-primary-content rounded-full w-full h-full flex items-center justify-center"
        :class="initialClass"
      >
        <span>{{ (username || '?')[0].toUpperCase() }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    username: string
    email?: string
    size?: number
  }>(),
  { size: 32 }
)

const gravatarError = ref(false)

const initialClass = computed(() => {
  if (props.size <= 32) return 'text-sm'
  if (props.size <= 40) return 'text-sm'
  return 'text-2xl font-semibold'
})
</script>
