<!--
  PillCounter — canonical bridge for Figma `Pill/Counter`.
  Variants: success · warning · info · neutral (去 broadcast 语义).

  BRIDGE-MOCKUP-003 (2026-05-19): ships code-first. Same pending-Figma status
  as PillStatus.
-->
<script setup lang="ts">
import { computed } from 'vue'
import Pill from '../components/Pill/Pill.vue'

type Kind = 'success' | 'warning' | 'info' | 'neutral'

const props = withDefaults(defineProps<{
  kind?: Kind
}>(), {
  kind: 'neutral',
})

const variantMapping = computed(() => {
  switch (props.kind) {
    case 'success': return { bgColor: 'brand' as const, dotColor: 'brand' as const }
    case 'warning': return { bgColor: 'red' as const,   dotColor: 'red' as const }
    case 'info':    return { bgColor: 'blue' as const,  dotColor: 'blue' as const }
    case 'neutral':
    default:        return { bgColor: 'grey' as const,  dotColor: 'grey' as const }
  }
})

const figmaAttrs = computed(() => ({
  'data-figma-component': 'Pill/Counter',
  'data-figma-kind': props.kind,
}))
</script>

<template>
  <Pill
    v-bind="figmaAttrs"
    :bg-color="variantMapping.bgColor"
    :dot-color="variantMapping.dotColor"
  >
    <slot />
  </Pill>
</template>
