<script setup>
import { computed, ref, watch } from 'vue'

// 작성자/추천자 아바타. 우선순위: 커스텀(profileImage) > 구글(googlePicture) > 이니셜.
const props = defineProps({
  name: { type: String, default: '' },
  googlePicture: { type: String, default: '' },
  profileImage: { type: String, default: '' },
  size: { type: Number, default: 28 },
})

const broken = ref(false)
const src = computed(() => props.profileImage || props.googlePicture || '')
const initial = computed(() => {
  const s = (props.name || '').trim()
  return s ? s[0].toUpperCase() : '?'
})
// src 가 바뀌면 깨짐 상태 리셋
watch(src, () => { broken.value = false })
</script>

<template>
  <span class="user-avatar" :style="{ width: size + 'px', height: size + 'px' }" :title="name">
    <img
      v-if="src && !broken"
      :src="src"
      :alt="name"
      referrerpolicy="no-referrer"
      @error="broken = true"
    />
    <span v-else class="ua-initial" :style="{ fontSize: Math.round(size * 0.45) + 'px' }">{{ initial }}</span>
  </span>
</template>

<style scoped>
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  vertical-align: middle;
  background: var(--color-background-mute);
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ua-initial {
  font-weight: 700;
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(160, 100%, 37%, 1);
}
</style>
