<script setup>
const props = defineProps({
  params: Object
})

const { t } = useTranslation()
const status = computed(() => props?.params?.data?.shipmentStatus || '')
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags are-small">
      <span v-if="status === 'incoming'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightskyblue; color: royalblue;"><i style="font-size: 14px; color: royalblue; margin-right: 5px;"class="ti ti-plane-arrival"></i>{{ t.incoming }}</span>
      <span v-if="status === 'packing'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: mediumpurple ; color: rebeccapurple;"><i style="font-size: 14px; color: rebeccapurple; margin-right: 5px;"class="ti ti-plane-departure"></i>{{ t.packing }}</span>
      <span v-if="status === 'shipped'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: #d4f8d4; color: #2e7d32;"><i style="font-size: 14px; color: #2e7d32; margin-right: 5px;"class="ti ti-plane"></i>{{ t.shipped }}</span>
      <span v-if="status === 'voided'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightpink; color: palevioletred;"><i style="font-size: 14px; color: palevioletred; margin-right: 5px;"class="ti ti-ban"></i>{{ t.voided }}</span>
      <span v-if="status === 'drafted'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightgrey; color: dimgrey;"><i style="font-size: 14px; color: dimgrey; margin-right: 5px; "class="ti ti-writing"></i>{{ t.draft }}</span>
      <span v-if="status === 'in_progress'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightgrey; color: dimgrey;"><i style="font-size: 14px; color: dimgrey; margin-right: 5px; "class="ti ti-edit"></i>{{ t.in_progress }}</span>
    </div>
  </div>
</template>