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

const props = defineProps({
  name: String,
  status: String,
  deliveries: Number,
  deliveries_completed: Number,
});
</script>
<template>
  <div
    class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
    :style="{
      border: '1px solid var(--bulma-grey-80)',
    }"
  >
    <AvatarBox :text="name.slice(0, 2)" />
    <div class="is-flex-grow-1">
      <div class="is-flex is-gap-1 is-align-items-center">
        <p>{{ name }}</p>
        <span :class="['tag', status === 'Đang giao' ? 'is-warning' : 'is-success']">{{ status }}</span>
      </div>
      <p class="fs-13 has-text-grey">Đơn: {{ deliveries_completed }}/{{ deliveries }}</p>
      <progress
        v-if="deliveries !== deliveries_completed"
        class="progress is-small is-primary mt-2"
        style="--bulma-size-small: 0.4rem"
        :value="deliveries_completed"
        :max="deliveries"
      ></progress>
    </div>
  </div>
</template>
