<template>
  <div class="hermes-status" :class="{ connected: isConnected }" :title="statusText">
    <span class="hermes-dot"></span>
    <span class="hermes-label">{{ isConnected ? 'Hermes' : 'Local' }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  isConnected?: boolean
}>()

const statusText = computed(() => 
  props.isConnected 
    ? 'Hermes: Connected (multi-user rooms available)'
    : 'Hermes: Not connected (single-user mode)'
)
</script>

<style scoped>
.hermes-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-dim);
  opacity: 0.6;
}
.hermes-status.connected {
  color: var(--accent-fg);
  background: rgba(34, 197, 94, 0.15);
  opacity: 0.9;
}
.hermes-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}
.hermes-status.connected .hermes-dot {
  background: #22c55e;
}
.hermes-label {
}
</style>