/**
 * OmniMotion — 脉冲加载 / Spinner (React 18+ · 纯 CSS 版本)
 * 复刻来源: stripe.com — 三点错峰缩放
 * 用法: <Spinner variant="pulse" dots={3} />
 */
export default function Spinner({ variant = "pulse", dots = 3 }) {
  return (
    <span className="mk-pulse" role="status" aria-label="加载中">
      {Array.from({ length: dots }).map((_, i) => (
        <span key={i} className="mk-pulse__dot" style={{ animationDelay: i * 160 + "ms" }} />
      ))}
    </span>
  );
}

/* 样式（可直接放入全局 CSS）
.mk-pulse { display: inline-flex; align-items: center; gap: 10px; }
.mk-pulse__dot {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--mk-primary-quiet);
  animation: mk-pulse 900ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes mk-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}
*/