/**
 * [INPUT]: 依赖 lib/courseTiers 的 tierInfo（档位配色/文案）、styles/v4/controls.css 的 .zzm-pill-shine（反光）
 * [OUTPUT]: 对外提供 TierPill 组件——课时档位胶囊（免费绿/会员黄/拓展红），shine 时一道反光时不时扫过
 * [POS]: screens/v4/course 的共享档位胶囊；被 LessonCard 标题前、HistoryPage 历史卡消费（全站档位胶囊单一皮肤）。
 *   level=required_level；shine=是否挂反光；delay=错峰延时(秒，逐卡不同→不齐刷)；style 供并入 marginRight 等
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { tierInfo } from '../../../lib/courseTiers'

export function TierPill({ level, shine = false, delay = 0, style }) {
  const t = tierInfo(level)
  return (
    <span
      className={shine ? 'zzm-pill-shine' : undefined}
      style={{
        display: 'inline-block', verticalAlign: 'middle', fontSize: 10, fontWeight: 600,
        letterSpacing: '.5px', padding: '2px 7px', borderRadius: 4,
        background: t.tint, color: t.ink,
        // 错峰：逐卡不同延时，避免同屏胶囊齐刷（::after 经此 CSS 变量读延时）
        ...(shine ? { '--zzm-shine-delay': `${delay}s` } : null),
        ...style,
      }}
    >{t.label}</span>
  )
}