<script setup lang="ts">
// 공용 사용자 아바타 — 프로필 이미지가 있으면 이미지를, 없으면 사람 실루엣 placeholder 를 표시.
// (색상+이니셜 방식은 폐기) 크기/모양은 부모의 사이징 래퍼가 정하고, 이 컴포넌트는 그 안을 채운다.
interface Props {
  url?: string | null // 프로필 이미지 URL (없으면 placeholder)
  name?: string // 이미지 대체 텍스트(접근성)
}
defineProps<Props>()
</script>

<template>
  <span class="user-avatar">
    <img
      v-if="url"
      class="ua-img"
      :src="url"
      :alt="name || '프로필 이미지'"
    >
    <svg
      v-else
      class="ua-ph"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
    >
      <!-- 사람 실루엣(빈 프로필 placeholder) -->
      <path d="M12 12.5a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5Z" />
      <path d="M4.5 19.25c0-3.04 3.36-5 7.5-5s7.5 1.96 7.5 5v.75H4.5v-.75Z" />
    </svg>
  </span>
</template>

<style scoped>
.user-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb; /* placeholder 배경(중립 회색) */
  flex-shrink: 0;
}
.ua-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ua-ph {
  width: 64%;
  height: 64%;
  color: #9aa1ac; /* placeholder 아이콘 색 */
}
</style>
