<script setup lang="ts">
// Initials avatar with a deterministic color drawn from the name. Palette
// matches the design — desaturated, slate/olive/wine tones that work on the
// carbon surface without competing with the signal accent.

const props = withDefaults(
  defineProps<{ name?: string; size?: number }>(),
  { name: '?', size: 32 },
)

const palette = ['#3D3D38', '#3F5B47', '#5B4D3F', '#3F4D5B', '#5B3F4D', '#4D5B3F']

const initials = computed(() =>
  props.name
    .split(' ')
    .filter(Boolean)
    .slice(0, 2)
    .map((p) => p.charAt(0).toUpperCase())
    .join(''),
)

const color = computed(() => {
  let s = 0
  for (let i = 0; i < props.name.length; i++) s = (s * 31 + props.name.charCodeAt(i)) >>> 0
  return palette[s % palette.length]
})
</script>

<template>
  <div
    class="avatar"
    :style="{
      width: size + 'px',
      height: size + 'px',
      background: color,
      fontSize: size * 0.36 + 'px',
    }"
  >{{ initials }}</div>
</template>

<style scoped>
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
</style>
