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

/**
 * Kole UI Button（React）
 * 对齐 button.json 契约：
 *  - type: primary | default | text | link | danger
 *  - size: large | default | small
 *  - disabled / loading / icon / children
 */
const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };

export default function Button({
  type = 'default',
  size = 'default',
  disabled = false,
  loading = false,
  icon = '',
  text = '',
  className = '',
  children,
  onClick,
  ...rest
}) {
  const isDisabled = disabled || loading;

  const classes = [
    'btn',
    `btn-${type}`,
    sizeMap[size],
    isDisabled && !loading ? 'btn-disabled' : '',
    loading ? 'is-loading' : '',
    className
  ].filter(Boolean).join(' ');

  const handleClick = (e) => {
    if (isDisabled) return;
    onClick && onClick(e);
  };

  return (
    <button className={classes} disabled={isDisabled} onClick={handleClick} {...rest}>
      {loading && <span className="spinner" aria-hidden="true" />}
      {!loading && icon && (
        <svg
          className="btn-icon"
          width="16" height="16"
          viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
        >
          <path d={icon} />
        </svg>
      )}
      <span className="btn-label">{children || text}</span>
    </button>
  );
}

/*
用法示例：
import Button from './Button';

<Button type="primary" size="large" onClick={save}>保存</Button>
<Button type="danger" loading>删除中</Button>
<Button type="default" icon="M12 5v14M5 12h14">新建</Button>
*/