<script setup>
const props = defineProps({
  name: String,
  sold_count: Number,
  revenue: Number,
  topRevenue: Number,
});

const { $shortenCurrency } = useNuxtApp();
</script>
<template>
  <div>
    <div class="is-flex is-gap-1 is-justify-content-space-between mb-2">
      <div>
        <p>{{ name }}</p>
        <p class="fs-13 has-text-grey-60">Đã bán {{ sold_count }} sản phẩm</p>
      </div>
      <p class="font-semibold">{{ $shortenCurrency(revenue) }}</p>
    </div>
    <progress
      class="progress is-small is-primary"
      :value="revenue"
      :max="topRevenue"
    >
      15%
    </progress>
  </div>
</template>
<style scoped>
.progress {
  --bulma-size-small: 0.5rem;
}
</style>
