<template>
  <div class="user-avatar">
    <div class="user-avatar-circle" :style="{ backgroundColor: avatarColor }">
      {{ initial }}
    </div>
    <span class="user-avatar-name">{{ name }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: { type: String, required: true },
  avatar: { type: String, default: null },
})

const COLORS = ['#CE4F51', '#055FC2', '#E8BD0B', '#218139', '#FF954D', '#3B414B']

const avatarColor = computed(() => {
  let hash = 0
  for (let i = 0; i < props.name.length; i++) {
    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
  }
  return COLORS[Math.abs(hash) % COLORS.length]
})

const initial = computed(() => props.name.charAt(0))
</script>

<style scoped>
.user-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}

.user-avatar-name {
  font-size: 16px;
  font-weight: 400;
  color: rgba(59, 65, 75, 1);
  line-height: 24px;
}
</style>
