<script setup>
import { computed, toRef } from "vue";
import { useCounterUp } from "../../composables/useCounterUp";
const props = defineProps({
  currency: { type: String, default: () => "USD" },
  tag: { type: String, default: "span" },
  value: { type: Number, default: 0 },
  type: { type: String, default: void 0 },
  maxFractionDigits: {
    type: Number,
    default: void 0
  }
});
const counter = useCounterUp(toRef(props, "value"), {
  decimals: props.maxFractionDigits ?? 0
});
const number = computed(
  () => Intl.NumberFormat("en-US", {
    currency: props.currency,
    maximumFractionDigits: props.maxFractionDigits,
    notation: "compact",
    style: props.type
  }).format(counter.value)
);
</script>

<template>
  <component :is="tag" class="format-number">
    <span v-text="number" />
  </component>
</template>

<style scoped>
.format-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
</style>
