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

const statusColors: Record<string, string> = {
  Online: '#51d49a',
  Degraded: '#e5b05e',
  Offline: '#e16e75',
}
</script>

<template>
  <span
    class="status-badge"
    :style="{ background: (statusColors[status] || '#7e8799') + '18', color: statusColors[status] || '#7e8799' }"
  >
    <span class="status-dot" :style="{ background: statusColors[status] || '#7e8799' }"></span>
    {{ status }}
  </span>
</template>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>
