/**
 * [INPUT]: 依赖 tokens.css 的 --zzm-accent
 * [OUTPUT]: 对外提供 Tag（小方角标签：试看/会员）、StatusPill（状态胶囊：通过/冷却/拦截/已使用）、RoundBadge（24px 墨色圆徽）
 * [POS]: src/extracted 的非交互标识，1:1 提炼自 edu AdmDesign「03 · 按钮」尾部与「06/10」样张。
 *   三者都不可点——这正是它们可以用胶囊/圆形的理由：「圆＝徽章不可点，方角＝控件可点」
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

const ACCENT = 'var(--zzm-accent, #A6402F)'

const TAG_TONES = {
  accent: { background: 'rgba(166,64,47,.08)', color: ACCENT },
  neutral: { background: '#EFEFEC', color: '#8B8B85' },
}

export function Tag({ tone = 'neutral', children }) {
  return (
    <span style={{
      display: 'inline-block', fontSize: 9.5, fontWeight: 600, letterSpacing: '1px',
      padding: '3px 8px', borderRadius: 4, ...TAG_TONES[tone],
    }}>{children}</span>
  )
}

const PILL_TONES = {
  ok: { background: 'rgba(79,169,106,.1)', color: '#3B8557' },
  neutral: { background: '#EFEFEC', color: '#8B8B85' },
  danger: { background: 'rgba(166,64,47,.07)', color: ACCENT },
}

export function StatusPill({ tone = 'neutral', children }) {
  return (
    <span style={{ display: 'inline-block', fontSize: 10.5, padding: '3px 8px', borderRadius: 999, ...PILL_TONES[tone] }}>
      {children}
    </span>
  )
}

export function RoundBadge({ children }) {
  return (
    <span style={{
      width: 24, height: 24, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: '#1D1D1B', color: '#FFFFFF', fontSize: 10, fontWeight: 600,
    }}>{children}</span>
  )
}