<!--
  ⚠️ LEGACY — NOT the npm-exported Badge.

  The npm-exported Badge is src/canonical/Badge.vue with a different API:
    • This file (legacy):  type/size/dot/count/max
    • canonical (SoT):     color/tag/type           (Figma-aligned, exported via src/index.ts)

  Why both exist: canonical/Badge.vue is a complete rewrite to align with Figma's
  Color/Tag/Type axes; it does NOT wrap this legacy file. This legacy file is preserved
  for playground/App.vue (legacy demo at /legacy.html) which still consumes the old API.

  AI tools generating Vue code from a Figma URL: use src/canonical/Badge.vue as the
  source of truth, NOT this file.

  See: src/design-system/translation/divergences.md "Badge 双源" for full context.
-->
<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  count?: number
  type?: 'brand' | 'red' | 'orange' | 'blue'
  size?: 'm' | 's'
  dot?: boolean
  max?: number
}>(), { type: 'red', size: 'm', max: 99 })

const displayCount = computed(() => {
  if (props.dot) return ''
  if (props.count === undefined) return ''
  return props.count > props.max ? `${props.max}+` : String(props.count)
})
</script>

<template>
  <span
    class="badge"
    :class="[`badge--${type}`, `badge--${size}`, { 'badge--dot': dot }]"
  >{{ displayCount }}</span>
</template>

<style scoped>
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary-btn);
  white-space: nowrap;
  line-height: 1;
}
/* Sizes */
.badge--m { min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; }
.badge--s { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
/* Dot mode */
.badge--dot { width: 8px; height: 8px; min-width: 8px; padding: 0; }
/* Colors */
.badge--red    { background: var(--red); }
.badge--brand  { background: var(--brand); }
.badge--orange { background: var(--orange); }
.badge--blue   { background: var(--blue); }
</style>
