<template>
  <div class="avatar-item__img flx-center" :class="size">
    {{ getLastChar(username) }}
  </div>
</template>

<script setup lang="ts">
interface AvatarIconProp {
  size?: "mini" | "small" | "default" | "large";
  username: string;
}
const props = withDefaults(defineProps<AvatarIconProp>(), {
  size: "default",
  onlyIcon: false
});
const getLastChar = (val: string) => {
  let len = ["small", "mini"].includes(props.size) ? 1 : 2;
  // return val.substring(val.length - len);
  return val.substring(0, len);
};
</script>

<style lang="scss">
.avatar-item__img {
  position: relative;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--li-linear-gradient-primary-1);

  color: $color-gray-1;
  @include text-style-h-5-bold;

  &.small {
    width: 32px;
    height: 32px;

    @include text-style-body-bold;
  }

  &.mini {
    width: 24px;
    height: 24px;

    @include text-style-footnote-description;
  }
}
</style>
