<script setup lang="ts">
import {
  getOrderStatusBadgePresentation,
  type OrderStatusTone,
} from '~/composables/useOrderStatusPresentation';

const props = defineProps<{
  status: string;
}>();

const badgePresentation = computed(() => getOrderStatusBadgePresentation(props.status));

function dotClass(tone: OrderStatusTone) {
  if (tone === 'success') return 'bg-[#139957]';
  if (tone === 'danger') return 'bg-[#d94b55]';
  if (tone === 'warning') return 'bg-[#f1a43a]';
  return 'bg-[#2e8de4]';
}
</script>

<template>
  <span class="inline-flex items-center gap-2 text-sm font-semibold leading-tight text-[#123824]">
    <span class="h-2.5 w-2.5 rounded-full" :class="dotClass(badgePresentation.tone)" />
    <span>{{ badgePresentation.label }}</span>
  </span>
</template>
