<template>
  <span
    class="status-badge"
    :class="`status-badge--${tone}`"
  >
    {{ label }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

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

const { t } = useI18n()

const tone = computed(() => {
  if (['ACTIVE', 'COMPLETED', 'SUCCEEDED'].includes(props.status)) {
    return 'success'
  }
  if (['PENDING_CONFIRM', 'READY', 'PENDING', 'TEMPORARY', 'EXECUTING'].includes(props.status)) {
    return 'info'
  }
  if (['BLOCKED', 'FAILED'].includes(props.status)) {
    return 'danger'
  }
  if (['ENDED', 'LOGIC_DELETED', 'SKIPPED'].includes(props.status)) {
    return 'neutral'
  }
  return 'warning'
})

const label = computed(() => t(`status.${props.status}`, t('common.unknownStatus')))
</script>

<style scoped>
.status-badge {
  display: inline-flex;
  min-width: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.status-badge--success {
  background: var(--th-color-success-bg);
  color: var(--th-color-success);
}

.status-badge--info {
  background: var(--th-color-info-bg);
  color: var(--th-color-info);
}

.status-badge--danger {
  background: var(--th-color-danger-bg);
  color: var(--th-color-danger);
}

.status-badge--warning {
  background: var(--th-color-warning-bg);
  color: var(--th-color-warning);
}

.status-badge--neutral {
  background: var(--th-color-slate-100);
  color: var(--th-color-slate-700);
}
</style>
