<script setup>
const props = defineProps({
  order: Object,
});

const { $dayjs } = useNuxtApp();

const historyItems = [
  {
    id: 1,
    name: "Tạo đơn hàng",
    details: "Đơn hàng được tạo",
    icon: "material-symbols:info-outline-rounded",
    color: "blue",
    time: "2026-02-11T08:51:04.587660+07:00",
  },
  {
    id: 2,
    name: "Xác nhận",
    details: "Đơn hàng được xác nhận",
    icon: "material-symbols:check-circle-outline-rounded",
    color: "green",
    time: "2026-02-11T10:30:04.587660+07:00",
  },
  {
    id: 3,
    name: "Xuất kho",
    details: "Hàng đã xuất kho",
    icon: "material-symbols:check-circle-outline-rounded",
    color: "green",
    time: "2026-02-11T11:02:04.587660+07:00",
  },
  {
    id: 4,
    name: "Đang giao",
    details: "Tài xế đang giao hàng",
    icon: "material-symbols:info-outline-rounded",
    color: "blue",
    time: "2026-02-11T14:20:04.587660+07:00",
  },
  {
    id: 5,
    name: "Giao hàng",
    details: "Đã giao thành công",
    icon: "material-symbols:check-circle-outline-rounded",
    color: "green",
    time: "2026-02-11T17:38:04.587660+07:00",
  },
];
</script>

<template>
  <div>
    <div class="is-flex is-flex-direction-column is-gap-2">
      <div
        v-for="item in historyItems"
        :key="item.id"
        class="is-flex is-gap-2"
      >
        <div class="is-flex is-flex-direction-column is-align-items-center is-gap-0.5">
          <Icon
            :name="item.icon"
            :size="22"
            :class="`has-text-${item.color}-40`"
          />
          <div
            class="is-flex-grow-1 has-background-grey-lighter rounded-full"
            style="width: 3px"
          ></div>
        </div>
        <div class="is-flex-grow-1">
          <div class="is-flex is-gap-1 is-justify-content-space-between">
            <div>
              <p class="fs-15">{{ item.name }}</p>
              <p class="fs-13 has-text-grey">{{ item.details }}</p>
            </div>
            <p class="is-family-monospace fs-12 has-text-grey">
              {{ $dayjs(item.time).format("HH:mm") }}
            </p>
          </div>
          <hr
            class="mt-4 mb-0 has-background-grey-95"
            style="height: 2px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
