<template>
  <div class="status-indicator">
    <div :class="['status-dot', connected ? 'status-connected' : 'status-disconnected']"></div>
    <span class="status-text">{{ connected ? '已连接' : '未连接' }}</span>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  connected: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  background-color: var(--background-secondary);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  animation: pulse 2s infinite;
}

.status-connected {
  background-color: var(--success-color);
}

.status-disconnected {
  background-color: var(--error-color);
}

.status-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.status-disconnected {
  animation: none;
}
</style>