import { h } from '@ui-arch/frame';
import type { BadgeProps } from './types.js';

/*** 徽标：文字 / 数字角标 / 纯红点三种形态，variant 决定语义色，纯展示不持有状态 ***/
export function badge(props: BadgeProps): HTMLElement {
  const tone = `ua-badge ua-badge-${props.variant ?? 'default'}`;
  if (props.dot) {
    // 红点：无可见文字，靠 aria-label 给出含义（如「有未读」）
    return h('span', { class: `${tone} ua-badge-dot`, role: 'img', 'aria-label': props.label ?? '有更新' });
  }
  if (props.count != null) {
    const max = props.max ?? 99; // 缺省上限 99
    const shown = props.count > max ? `${max}+` : String(Math.max(0, props.count)); // 负数归零，超限折成 N+
    return h('span', { class: `${tone} ua-badge-count`, 'aria-label': props.label ? `${props.label} ${shown}` : undefined }, shown);
  }
  return h('span', { class: tone }, props.label);
}