<template>
  <div class="ui-avatar">
    <img
      v-if="src || data.avatar"
      :src="avatar"
      :width="size"
      :height="size"
      :alt="$t(alt)"
    >
    <span
      v-else
      :style="{ width: size + 'px', height: size + 'px' }"
      class="ui-avatar__placeholder"
    >{{ avatar }}</span>
  </div>
</template>

<script setup lang="ts">
import type { IProfileData } from '../../types';

const props = withDefaults(defineProps<{
  size?: number
  alt?: string
  src?: string
}>(), {
  size: 36,
  alt: 'avatar'
});

const data = computed(() => useState<IProfileData>('profileData').value);

const avatar = computed(() => props.src || (data.value && (data.value.avatar || data.value.username.charAt(0))));
</script>

<style lang="scss">
.ui-avatar {
  @include font-sm;

  aspect-ratio: 1/1;
  border-radius: $radius-full;
  overflow: hidden;
  object-fit: cover;
  text-transform: uppercase;
  background: linear-gradient(to bottom right, $avatar-gradient-from, $avatar-gradient-to);
}

.ui-avatar__placeholder {
  color: $avatar-text;
  font-weight: 700;
  display: grid;
  place-content: center;
}
</style>
