<template>
  <span class="cloud-badge" :style="{ background: CLOUD_COLORS[cloud_type] }">
    <img v-if="showIcon && CLOUD_ICONS[cloud_type]" :src="CLOUD_ICONS[cloud_type]" class="badge-icon" />
    {{ CLOUD_LABELS[cloud_type] }}
  </span>
</template>

<script setup lang="ts">
import { CLOUD_LABELS, CLOUD_COLORS, CLOUD_ICONS } from '../types'
import type { CloudType } from '../types'

defineProps<{
  cloud_type: CloudType
  showIcon?: boolean
}>()
</script>

<style scoped>
.cloud-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
</style>
