<template>
  <div :class="[$style.CustomFeatureImage, classes]">
    <CustomIcon :icon="icon" size="large" />
  </div>
</template>

<script setup lang="ts">
import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
import { computed, useCssModule } from 'vue';
import CustomIcon from './CustomIcon.vue';

const { size = 'medium' } = defineProps<{
  icon: Icons,
  size?: 'medium' | 'small'
}>()

const style = useCssModule()
const classes = computed(() => ({
  [style.CustomAvatar]: true,
  [style.CustomAvatarSmall]: size === 'small'
}))
</script>

<style lang="scss" module>
@use '@beeline/design-tokens/scss/tokens/components/avatar';
@use "@beeline/design-tokens/scss/tokens/themes";

.CustomAvatar {
  border-radius: avatar.$avatar-squircle-border-radius;
  display: flex;
  justify-content: center;
  align-items: center;

  height: avatar.$avatar-medium-height;
  width: avatar.$avatar-medium-width;
  letter-spacing: avatar.$avatar-medium-text-font-letter-spacing;
  line-height: avatar.$avatar-medium-text-font-line-height;
  font-size: avatar.$avatar-medium-text-font-size;
  background-color: themes.$color-status-neutral-background;

  &Small {
    height: avatar.$avatar-small-height;
    width: avatar.$avatar-small-width;
  }
}
</style>