<!--
  Pill — internal base component for Status pill + Counter pill.
  Consumers should use the canonical wrappers:
    - PillStatus  (src/canonical/PillStatus.vue)  — "状态徽章" with status semantics
    - PillCounter (src/canonical/PillCounter.vue) — "计数徽章" with counter semantics

  BRIDGE-MOCKUP-003 (2026-05-19): code-leads-figma-pending. Figma library will
  add Pill/Status + Pill/Counter; tokens already aligned via BRIDGE-MOCKUP-001
  (--msg-bg-red/brand/blue/grey).
-->
<script setup lang="ts">
import { computed } from 'vue'

type DotColor = 'brand' | 'red' | 'blue' | 'orange' | 'grey'
type BgColor = 'brand' | 'red' | 'blue' | 'grey'

const props = withDefaults(defineProps<{
  dotColor?: DotColor
  bgColor?: BgColor
  showDot?: boolean
}>(), {
  dotColor: 'grey',
  bgColor: 'grey',
  showDot: true,
})

const dotCssVar = computed(() => {
  const map: Record<DotColor, string> = {
    brand: 'var(--brand)',
    red: 'var(--red)',
    blue: 'var(--blue)',
    orange: 'var(--orange)',
    grey: 'var(--text-tips)',
  }
  return map[props.dotColor]
})

const bgCssVar = computed(() => {
  const map: Record<BgColor, string> = {
    brand: 'var(--msg-bg-brand)',
    red: 'var(--msg-bg-red)',
    blue: 'var(--msg-bg-blue)',
    grey: 'var(--msg-bg-grey)',
  }
  return map[props.bgColor]
})

const pillStyle = computed(() => ({
  '--pill-bg': bgCssVar.value,
  '--pill-dot': dotCssVar.value,
}))
</script>

<template>
  <span class="pill" :style="pillStyle">
    <span v-if="showDot" class="pill__dot" aria-hidden="true"></span>
    <span class="pill__label"><slot /></span>
  </span>
</template>

<style scoped>
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
}

.pill__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pill-dot);
}

.pill__label {
  font-variant-numeric: tabular-nums;
}
</style>
