<template>
  <img
    v-if="avatarUrl"
    :src="avatarUrl"
    :style="style"
    class="rounded-full object-cover shrink-0"
    :alt="name"
  />
  <div
    v-else
    :style="style"
    class="rounded-full bg-zinc-800 flex items-center justify-center text-zinc-500 font-bold font-display shrink-0"
  >
    {{ name.charAt(0).toUpperCase() }}
  </div>
</template>

<script setup lang="ts">
// Small shared avatar block (img, or an initial-letter fallback) -- pulled
// out because M3's friends/chat UI renders many small avatars in lists,
// unlike the rest of /community which only ever renders one big one per
// page. Sized via inline style rather than a Tailwind size-N class so an
// arbitrary numeric prop doesn't depend on that exact class string
// appearing literally somewhere for Tailwind's scanner to pick up.
const props = withDefaults(
  defineProps<{
    avatarUrl?: string | null;
    name: string;
    sizePx?: number;
  }>(),
  { avatarUrl: null, sizePx: 32 },
);

const style = computed(() => ({
  width: `${props.sizePx}px`,
  height: `${props.sizePx}px`,
  fontSize: `${Math.round(props.sizePx * 0.4)}px`,
}));
</script>
