<script setup>
import { capitalize } from "es-toolkit";

const props = defineProps({
  invoice: Object,
});
</script>

<template>
  <div class="is-flex is-flex-direction-column is-gap-1">
    <div
      class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
    >
      <div>
        <p class="fs-14 has-text-grey-40">Mã giao hàng</p>
        <p class="is-flex is-gap-1 is-align-items-center">
          <span class="font-semibold">{{ invoice.delivery__tracking_code }}</span>
          <button
            class="button is-ghost is-small p-0 rounded-full"
            @click="$copyToClipboard(invoice.delivery__tracking_code)"
          >
            <span class="icon">
              <Icon
                name="material-symbols:content-copy-outline-rounded"
                :size="17"
              />
            </span>
          </button>
        </p>
      </div>
      <p class="font-medium has-text-primary-50">
        {{ capitalize(invoice.delivery__status) }}
      </p>
    </div>
    <div
      class="rounded-md has-background-grey-100"
      style="border: 1px solid var(--bulma-grey-90)"
    >
      <div class="p-4">
        <p class="fs-14 has-text-grey-40">Địa chỉ giao hàng</p>
        <p class="font-medium">{{ invoice.shipping_address }}</p>
      </div>
      <hr
        class="m-0 has-background-grey-90"
        style="height: 1px"
      />
      <div class="p-4">
        <p class="fs-14 has-text-grey-40">Người nhận</p>
        <p class="font-medium">{{ invoice.delivery__receiver_name }}</p>
      </div>
      <hr
        class="m-0 has-background-grey-90"
        style="height: 1px"
      />
      <div class="p-4">
        <p class="fs-14 has-text-grey-40">Số điện thoại</p>
        <p class="font-medium">{{ invoice.delivery__receiver_phone }}</p>
      </div>
    </div>
  </div>
</template>
