/**
 * [INPUT]: 依赖 styles/v4/controls.css 的 .zzm-btn 质感类（微拟物：凸面渐变+顶部反光+落影+光晕环+按压内陷）
 * [OUTPUT]: 对外提供 Btn 组件——v4 微拟物按钮的唯一装配点（variant: paper|primary|accent|ghost|ondark；
 *          size: sm|md|lg；icon 方形；block 撑满）
 * [POS]: components/v4 的灵魂控件。全站按钮一律【圆角矩形】（sm/md=8 · lg=12），禁胶囊——
 *   胶囊只留给非交互徽章。视觉全部来自 controls.css 的类；调用方 style 只放【布局】（margin/flex/width），
 *   禁止在 style 里散写 background/boxShadow/borderRadius 盖掉质感（各写各的光源方向必然穿帮）。
 *   需要带图标/自定义内容直接塞 children；非 <button> 场景（<a>/label）用 btnClass() 取同一套类名。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
/* eslint-disable react-refresh/only-export-components -- 按钮组件与类名工厂同源内聚（同 Celebration/sceneKit 先例） */

/** 组合微拟物按钮类名（供 <a>/label 等非 button 元素复用同一质感） */
export function btnClass({ variant = 'paper', size = 'md', icon = false, block = false, busy = false, className = '' } = {}) {
  return [
    'zzm-btn',
    variant !== 'paper' && `zzm-btn--${variant}`,
    size !== 'md' && `zzm-btn--${size}`,
    icon && 'zzm-btn--icon',
    block && 'zzm-btn--block',
    busy && 'zzm-btn--busy',
    className,
  ].filter(Boolean).join(' ')
}

// busy＝Saving/等待态：出旋转指示、保留变体本色、自动禁用（「正在做」≠「不能做」的灰禁用）
export function Btn({ variant = 'paper', size = 'md', icon = false, block = false, busy = false, className = '', type = 'button', disabled, children, ...rest }) {
  return (
    <button type={type} disabled={busy || disabled} className={btnClass({ variant, size, icon, block, busy, className })} {...rest}>
      {children}
    </button>
  )
}