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

const statuses = [
  {
    id: 1,
    code: "pending",
    name: "Chờ xử lý",
    value: 12,
    color: "orange",
    icon: "material-symbols:clock-loader-40",
  },
  {
    id: 2,
    code: "delivering",
    name: "Đang giao",
    value: 8,
    color: "blue",
    icon: "material-symbols:delivery-truck-speed-outline-rounded",
  },
  {
    id: 3,
    code: "delivered",
    name: "Đã giao",
    value: 15,
    color: "purple",
    icon: "material-symbols:bucket-check-outline-rounded",
  },
  {
    id: 4,
    code: "completed",
    name: "Hoàn thành",
    value: 38,
    color: "green",
    icon: "material-symbols:check-circle-outline-rounded",
  },
];
</script>
<template>
  <div class="card h-full">
    <div class="card-content">
      <p class="fs-17 font-semibold mb-4">Trạng thái đơn hàng</p>
      <div class="fixed-grid has-2-cols-mobile has-4-cols">
        <div class="grid">
          <OrderStatusCard
            v-for="status in statuses"
            :key="status.name"
            v-bind="status"
          />
        </div>
      </div>
    </div>
  </div>
</template>
