<template>
  <div class="status-bar">
    <div class="status-badges">
      <span class="badge" :class="connected ? 'badge-ok' : 'badge-err'">
        {{ connected ? 'Connected' : 'Offline' }}
      </span>
      <span v-if="health" class="badge badge-info">
        Mode: {{ health.mode || 'sender' }}
      </span>
      <span v-if="health" class="badge badge-info">
        Flows: {{ health.active_flows || 0 }}
      </span>
      <span v-if="health" class="badge badge-info">
        Tests: {{ health.active_tests || 0 }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ health: Object, apiError: String })
const connected = computed(() => !props.apiError && props.health)
</script>

<style scoped>
.status-bar { display: flex; align-items: center; gap: 8px; }
.status-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  font-weight: 600; letter-spacing: 0.03em;
}
.badge-ok { background: rgba(72,187,120,0.15); color: var(--success); }
.badge-err { background: rgba(252,129,129,0.15); color: var(--danger); animation: pulse 1.5s infinite; }
.badge-info { background: rgba(79,156,249,0.12); color: var(--accent); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
</style>
