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

const customers = [
  {
    name: "Công ty TNHH ABC",
    order_count: 45,
    paid: 125000000,
  },
  {
    name: "Siêu thị XYZ",
    order_count: 38,
    paid: 98000000,
  },
  {
    name: "Nhà hàng Đông Dương",
    order_count: 32,
    paid: 87000000,
  },
  {
    name: "Khách sạn Mường Thanh",
    order_count: 28,
    paid: 76000000,
  },
  {
    name: "Cửa hàng Bách Hoá",
    order_count: 24,
    paid: 64000000,
  },
];
</script>
<template>
  <div class="card">
    <div class="card-content">
      <p class="fs-16 font-semibold mb-4">Top khách hàng</p>
      <div class="is-flex is-flex-direction-column is-gap-1.5">
        <TopCustomer
          v-for="cus in customers"
          :key="cus.name"
          v-bind="cus"
        />
      </div>
    </div>
  </div>
</template>
