<script setup lang="ts">
defineProps<{
  type: 'PASS' | 'LIMIT' | 'FAIL' | 'ACTIVE' | 'ARCHIVED' | 'APPROVED' | 'SHADOW'
  label?: string
}>()
</script>

<template>
  <span
    :style="{
      backgroundColor: type === 'PASS' || type === 'ACTIVE' || type === 'APPROVED' ? '#E8F8F5' : type === 'LIMIT' ? '#FEF9E7' : '#FDEDEC',
      color: type === 'PASS' || type === 'ACTIVE' || type === 'APPROVED' ? '#117864' : type === 'LIMIT' ? '#B9770E' : '#922B21',
      border: '1px solid ' + (type === 'PASS' || type === 'ACTIVE' || type === 'APPROVED' ? '#2ECC71' : type === 'LIMIT' ? '#F39C12' : '#E74C3C')
    }"
    style="padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px; display: inline-block;">
    {{ label || type }}
  </span>
</template>
