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

/* 加载（移动端）— 规格 §22；指示器持续旋转、状态由 aria-busy 与 role=status 承担。
   fullscreen=true 时铺一层遮罩（期间不能操作下方内容），由 open 控制显隐。 */
export default function Loading({
  size = 'default',
  text = '',
  vertical = false,
  fullscreen = false,
  open = false,
  children = null,
}) {
  const cls =
    'kole-m-loading' +
    (size === 'small' ? ' kole-m-loading--small' : '') +
    (size === 'large' ? ' kole-m-loading--large' : '') +
    (vertical ? ' kole-m-loading--vertical' : '') +
    (fullscreen ? ' is-fullscreen' : '') +
    (open ? ' is-open' : '');

  const body = (
    <>
      <span className="kole-m-loading__spinner" aria-hidden="true" />
      {text || children ? (
        <span className="kole-m-loading__text">{text || children}</span>
      ) : null}
    </>
  );

  /* 规格 §22.6：容器 role=status + aria-live=polite（读屏播报一次），加载中置 aria-busy */
  return (
    <div className={cls} role="status" aria-live="polite" aria-busy={fullscreen && !open ? 'false' : 'true'}>
      {fullscreen ? <div className="kole-m-loading__panel">{body}</div> : body}
    </div>
  );
}