<script setup>
import PipelinePhase from "@/components/orders/PipelinePhase.vue";

const phases = [
  {
    name: "Nháp",
    value: 2,
    icon: "material-symbols:assignment-outline-rounded",
    color: "yellow",
    index: 1,
  },
  {
    name: "Đã xác nhận",
    value: 3,
    icon: "material-symbols:check-circle-outline-rounded",
    color: "blue",
    index: 2,
  },
  {
    name: "Đang giao",
    value: 2,
    icon: "material-symbols:delivery-truck-speed-outline-rounded",
    color: "orange",
    index: 3,
  },
  {
    name: "Hoàn thành",
    value: 1,
    icon: "material-symbols:box-outline-rounded",
    color: "green",
    index: 4,
  },
];
</script>
<template>
  <div class="card">
    <div class="card-content">
      <p class="fs-16 font-semibold mb-4">Pipeline đơn hàng</p>
      <div class="is-flex is-justify-content-space-evenly">
        <PipelinePhase
          v-for="phase in phases"
          :key="phases.name"
          v-bind="phase"
        />
      </div>
      <hr class="has-background-grey-lighter" />
      <div class="is-flex is-justify-content-space-between">
        <p>Tổng đơn hàng</p>
        <p class="fs-18 font-semibold">
          {{ phases.reduce((prev, curr) => prev + curr.value, 0) }}
        </p>
      </div>
    </div>
  </div>
</template>
