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

/* 宫格（移动端）— 规格 §14
   可点格子是原生 button（整块热区 ≥ 44×44、键盘可达），static 格子用 div 且不绑点击；
   select 只回传被点格子的下标，跳转由宿主决定。 */
export default function Grid({
  columns = 4,
  border = false,
  square = false,
  items = [],
  onSelect,
  children = null,
}) {
  const cls =
    'kole-m-grid' +
    ` kole-m-grid--${columns}` +
    (border ? ' kole-m-grid--border' : '') +
    (square ? ' kole-m-grid--square' : '');

  /* 图标是装饰（规格 §14.6），文字即语义 */
  const iconOf = (it) =>
    it && it.icon ? (
      <span className="kole-m-grid__icon" aria-hidden="true">
        {it.icon}
      </span>
    ) : null;
  const textOf = (it) => (it && it.text ? <span className="kole-m-grid__text">{it.text}</span> : null);
  const itemCls = (it) => 'kole-m-grid__item' + (it && it.disabled ? ' is-disabled' : '');

  return (
    <div className={cls}>
      {items.map((it, i) =>
        it && it.static ? (
          /* 纯展示格子：div 且不加交互角色（规格 §14.6） */
          <div key={i} className={`${itemCls(it)} kole-m-grid__item--static`}>
            {iconOf(it)}
            {textOf(it)}
          </div>
        ) : (
          <button
            key={i}
            className={itemCls(it)}
            type="button"
            disabled={!!(it && it.disabled)}
            onClick={() => {
              if (!it || it.disabled) return;
              if (onSelect) onSelect(i);
            }}
          >
            {iconOf(it)}
            {textOf(it)}
          </button>
        )
      )}
      {children}
    </div>
  );
}