import React from 'react';
import './Button.css';

/* 按钮（移动端）— 规格 §6；三档高度（44 / 36 / 28），loading 期间阻止重复触发 */
export default function Button({
  type = 'default',
  size = 'default',
  block = false,
  disabled = false,
  loading = false,
  onClick,
  children,
  icon = null,
}) {
  const cls =
    'kole-m-btn' +
    (type === 'primary' ? ' kole-m-btn--primary' : '') +
    (type === 'text' ? ' kole-m-btn--text' : '') +
    (type === 'danger' ? ' kole-m-btn--danger' : '') +
    (type === 'default' ? ' kole-m-btn--default' : '') +
    (size === 'large' ? ' kole-m-btn--large' : '') +
    (size === 'small' ? ' kole-m-btn--small' : '') +
    (block ? ' is-block' : '') +
    (loading ? ' is-loading' : '');

  return (
    <button
      className={cls}
      type="button"
      disabled={disabled || loading}
      aria-busy={loading ? 'true' : 'false'}
      onClick={() => {
        if (disabled || loading) return;
        if (onClick) onClick();
      }}
    >
      {loading ? <span className="kole-m-btn__spinner" aria-hidden="true" /> : icon}
      <span className="kole-m-btn__label">{children}</span>
    </button>
  );
}