<template>
  <span class="goods-emoji" :class="`goods-emoji--${size}`" role="img" :aria-label="ariaLabel">
    {{ emoji }}
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { getGoodsEmoji, DEFAULT_GOODS_EMOJI } from '@/utils/storeFormat'

const props = defineProps({
  icon: { type: String, default: '' },
  size: {
    type: String,
    default: 'md',
    validator: (v) => ['sm', 'md', 'lg', 'xl'].includes(v)
  },
  ariaLabel: { type: String, default: '商品图标' },
  fallback: { type: String, default: '' }
})

const emoji = computed(() => getGoodsEmoji(props.icon, props.fallback || DEFAULT_GOODS_EMOJI))
</script>

<style scoped lang="less">
.goods-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;

  &--sm {
    font-size: 2rem;
  }

  &--md {
    font-size: 2.75rem;
  }

  &--lg {
    font-size: 3.5rem;
  }

  &--xl {
    font-size: 4.5rem;
  }
}
</style>
