<script setup lang="ts">
import { profileAvatarSeedFromValue, profileAvatarUrl } from '~/utils/profileAvatars'

const props = withDefaults(defineProps<{
  avatarSeed?: string | null
  seed?: string | null
  label?: string | null
  size?: number
}>(), {
  avatarSeed: '',
  seed: '',
  label: '',
  size: 48,
})

const normalizedSeed = computed(() => {
  const source = props.avatarSeed || props.seed || props.label || 'person'
  return profileAvatarSeedFromValue(source)
})

const avatarSrc = computed(() => profileAvatarUrl(normalizedSeed.value))
const avatarStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
}))
</script>

<template>
  <div
    class="relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[34%] border border-white/80 bg-white shadow-[0_12px_28px_rgba(47,36,24,0.16)]"
    :style="avatarStyle"
    :title="label || undefined"
    role="img"
    :aria-label="label ? `Аватар: ${label}` : 'Аватар'"
  >
    <img :src="avatarSrc" :alt="label || 'Аватар'" class="h-full w-full object-cover" loading="lazy">
  </div>
</template>
