<script setup lang="ts">
/**
 * Avatar — player / operator avatar. Renders an image, or falls back to initials.
 * Optional status dot (online / offline / warn / idle) sits bottom-right.
 */
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    name?: string
    src?: string
    size?: number
    shape?: 'rounded' | 'circle'
    status?: 'online' | 'offline' | 'warn' | 'idle'
  }>(),
  { name: '', size: 32, shape: 'rounded' },
)

const TONE: Record<string, string> = {
  online: 'var(--status-online)',
  offline: 'var(--status-offline)',
  warn: 'var(--status-warn)',
  idle: 'var(--text-muted)',
}

const initials = computed(() =>
  props.name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map(w => w[0] ?? '')
    .join('')
    .toUpperCase() || '?',
)

const dotSize = computed(() => Math.max(7, Math.round(props.size * 0.28)))
const dotColor = computed(() => (props.status ? (TONE[props.status] ?? TONE.idle) : ''))
</script>

<template>
  <span
    class="cc-avatar"
    :class="shape === 'circle' && 'cc-avatar--circle'"
    :style="{
      width: size + 'px',
      height: size + 'px',
      fontSize: Math.round(size * 0.4) + 'px',
    }"
  >
    <img v-if="src" :src="src" :alt="name" />
    <template v-else>{{ initials }}</template>
    <span
      v-if="status"
      class="cc-avatar__status"
      :style="{ width: dotSize + 'px', height: dotSize + 'px', background: dotColor }"
    />
  </span>
</template>

<style>
.cc-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: var(--radius-md); background: var(--surface-active); color: var(--text-secondary);
  font-family: var(--font-mono); font-weight: 600; overflow: visible; box-shadow: var(--ring-default);
}
.cc-avatar--circle { border-radius: 50%; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cc-avatar__status {
  position: absolute; right: -2px; bottom: -2px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-base);
}
</style>
