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

<template>
  <div>
    <div class="is-flex is-gap-2">
      <div class="is-flex-grow-1 p-3 rounded-md has-background-grey-95">
        <p class="fs-13 has-text-grey">Tổng tiền</p>
        <p class="font-bold">
          {{ $numtoString(order.total, { hasUnit: true }) }}
        </p>
      </div>
      <div class="is-flex-grow-1 p-3 rounded-md has-background-success-95">
        <p class="fs-13 has-text-success-40">Đã thanh toán</p>
        <p class="font-bold has-text-success-30">0 đ</p>
      </div>
    </div>
    <div class="p-4 mt-4 rounded-md has-background-danger-95">
      <p class="fs-13 has-text-danger-50">Còn lại</p>
      <p class="fs-20 font-bold has-text-danger-40">
        {{ $numtoString(order.total, { hasUnit: true }) }}
      </p>
    </div>
  </div>
</template>
