<script setup>
import AvatarBox from "@/components/dashboard/AvatarBox.vue";

const props = defineProps({
  name: String,
  order_count: Number,
  paid: Number,
});

const { $shortenCurrency } = useNuxtApp();
</script>
<template>
  <div class="is-flex is-gap-1 is-justify-content-space-between">
    <div class="is-flex is-gap-1">
      <AvatarBox :text="name.slice(0, 2)" />
      <div>
        <p>{{ name }}</p>
        <p class="fs-13 has-text-grey">{{ order_count }} đơn hàng</p>
      </div>
    </div>
    <p class="font-semibold">{{ $shortenCurrency(paid) }}</p>
  </div>
</template>
