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

const products = [
  {
    name: "Gạo ST25 - Bao 5kg",
    sold_count: 1250,
    revenue: 156000000,
  },
  {
    name: "Nước mắm Phú Quốc - Chai 500ml",
    sold_count: 980,
    revenue: 132000000,
  },
  {
    name: "Đường tinh luyện - Bao 1kg",
    sold_count: 856,
    revenue: 98000000,
  },
  {
    name: "Dầu ăn Neptune - Chai 1L",
    sold_count: 742,
    revenue: 87000000,
  },
  {
    name: "Bột mì đa dụng - Bao 1kg",
    sold_count: 623,
    revenue: 72000000,
  },
];
</script>
<template>
  <div class="card">
    <div class="card-content">
      <p class="fs-17 font-semibold mb-4">Top sản phẩm</p>
      <div class="is-flex is-flex-direction-column is-gap-2">
        <TopProduct
          v-for="product in products"
          :key="product.name"
          v-bind="{
            ...product,
            topRevenue: products[0].revenue,
          }"
        />
      </div>
    </div>
  </div>
</template>
