<script setup>
import { useOrderStore } from "@/stores/OrderStore";
const { shipmentStatus } = useOrderStore();
const getStatusColor = () => {
  switch (shipmentStatus) {
    case "ready_for_shipment":
      return "text-green-600 bg-green-100";
    case "partial_shipped":
      return "text-primary-600 bg-primary-100";
    case "all_shipped":
      return "text-primary-600 bg-primary-100";
  }
};
</script>
<template>
  <div class="my-2">
    <div
      :class="`${getStatusColor()} flex !w-full py-2 px-4 gap-1 rounded-md font-semibold justify-center`"
    >
      <check-circle-icon
        v-if="shipmentStatus === 'ready_for_shipment'"
        class="w-4"
      />
      {{ $t(shipmentStatus) }}
      <span v-if="shipmentStatus === 'ready_for_shipment'">📦</span>
    </div>
  </div>
</template>
