/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-toast（深墨胶囊 + 落影 + zzmUp 进场）、tokens.css 的 --zzm-accent
 * [OUTPUT]: 对外提供 Toast（轻提示）、Progress（4px 朱色进度条）
 * [POS]: src/extracted 的反馈原语，1:1 提炼自 edu AdmDesign「07 · 反馈与确认」样张。
 *   Toast 只负责「长什么样」，定位（fixed/absolute + 水平居中）与 1.8s 自动消失交给调用方——样张即如此分工
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

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

export function Toast({ children, style }) {
  return <div role="status" className="zzm-toast" style={style}>{children}</div>
}

export function Progress({ value = 0, label = '进度' }) {
  const v = Math.max(0, Math.min(100, value))
  return (
    <div role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={v}
      style={{ height: 4, borderRadius: 2, background: 'rgba(0,0,0,.09)', overflow: 'hidden' }}>
      <div style={{ width: `${v}%`, height: '100%', background: ACCENT }} />
    </div>
  )
}