<template>
  <div class="status-indicator">
    <span class="dot"></span>
    <span class="label">
      <!-- 支持通过 prop 传入文本，也支持通过插槽 (slot) 传入更复杂的内容 -->
      <slot>{{ text }}</slot>
    </span>
  </div>
</template>

<script setup lang="ts">
// 定义 Props 类型
interface Props {
  color?: string; // 圆点颜色
  text?: string;  // 显示的文本
}

// 设置默认值
withDefaults(defineProps<Props>(), {
  color: '#35FFDD', // 默认使用图片中的青/荧光蓝色
  text: '启用'
});
</script>

<style scoped>
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 圆点和文字之间的间距 */
  font-size: 14px;
  color: var(--admin-text-primary);
  /* 适配你之前暗黑主题的文字颜色 */
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* 使用 Vue3 的 v-bind 特性直接绑定 prop 中的 color 到 CSS 变量 */
  background-color: v-bind(color);
  display: inline-block;

  /* 可选：如果你想要一点点发光的效果，可以取消下面这行的注释 */
  box-shadow: 0 0 4px v-bind(color);
}

.label {
  line-height: 1;
}
</style>