<template>
  <a-tag :color="meta.color" size="small" class="order-state-tag">
    <span class="dot" :class="`dot--${state}`" />
    {{ meta.label }}
  </a-tag>
</template>

<script setup>
import { computed } from 'vue'
import { getOrderStateMeta } from '@/utils/storeFormat'

const props = defineProps({
  state: { type: Number, required: true }
})

const meta = computed(() => getOrderStateMeta(props.state))
const state = computed(() => props.state)
</script>

<style scoped lang="less">
.order-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;

  &--0 { opacity: 1; }
  &--1 { opacity: 0.9; }
  &--2 { opacity: 0.85; }
  &--3 { opacity: 0.6; }
  &--5 { opacity: 0.75; }
}
</style>
