<script setup>
const props = defineProps({
  variant: Object,
});

const status = computed(() => {
  const stock = props.variant.imei_count - 0; // imei sold
  if (stock === 0) return { text: "Hết", color: "red" };
  if (stock < 10) return { text: "Thấp", color: "yellow" };
  return { text: "OK", color: "green" };
});
</script>

<template>
  <span
    :class="['tag is-rounded is-light fs-12', `is-${status.color}`]"
    :style="{ border: `1px solid var(--bulma-${status.color}-80)` }"
    >{{ status.text }}</span
  >
</template>
