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

const props = defineProps<{
  online: boolean
  pendingCommands?: number
  syncing?: boolean
}>()

const label = computed(() => {
  if (!props.online) return props.pendingCommands ? `오프라인 · ${props.pendingCommands}건 대기` : '오프라인'
  if (props.syncing) return `동기화 중${props.pendingCommands ? ` · ${props.pendingCommands}건` : ''}`
  if (props.pendingCommands) return `온라인 · ${props.pendingCommands}건 전송 대기`
  return '온라인'
})
</script>

<template>
  <span class="network" :class="{ offline: !online, syncing }" role="status" aria-live="polite">
    <span class="dot" aria-hidden="true" />
    {{ label }}
  </span>
</template>

<style scoped>
.network { display:inline-flex; gap:6px; align-items:center; font-size:12px; white-space:nowrap; color:var(--kbx-color-text-muted); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--kbx-color-success); }
.offline .dot { background:var(--kbx-color-danger); }
.syncing .dot { background:var(--kbx-color-warning); }
</style>
