<script setup lang="ts">
const props = defineProps<{
  status: string;
}>();

const statusLabel = computed(() => {
  if (props.status === 'NEW' || props.status === 'MANAGER_PROCESSING') return 'Заявка';
  if (props.status === 'WAITING_DOUBLE_CONFIRM' || props.status === 'CONFIRMED') return 'Предложение';
  if (props.status === 'IN_PROGRESS') return 'В работе';
  if (props.status === 'COMPLETED') return 'Завершен';
  if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'Отклонен';
  if (props.status === 'MANAGER_BLOCKED') return 'Пауза';
  return props.status;
});

const className = computed(() => {
  if (props.status === 'COMPLETED') return 'bg-[#139957]';
  if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'bg-[#d94b55]';
  if (props.status === 'MANAGER_BLOCKED') return 'bg-[#f1a43a]';
  if (props.status === 'NEW' || props.status === 'MANAGER_PROCESSING') return 'bg-[#f1a43a]';
  return 'bg-[#2e8de4]';
});
</script>

<template>
  <span class="inline-flex items-center gap-2 text-sm font-semibold text-[#123824]">
    <span class="h-2.5 w-2.5 rounded-full" :class="className" />
    <span>{{ statusLabel }}</span>
  </span>
</template>
