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

/* 底部标签栏（移动端）— 规格 §2；每项等分宽度、热区 ≥ 44px，选中态同步 aria-selected */
export default function TabBar({ items = [], value = '', onChange, label = '主导航' }) {
  return (
    <nav className="kole-m-tabbar" role="tablist" aria-label={label}>
      {items.map((it) => {
        const active = it.key === value;
        return (
          <button
            key={it.key}
            className={'kole-m-tabbar__item' + (active ? ' is-active' : '')}
            type="button"
            role="tab"
            aria-selected={active ? 'true' : 'false'}
            aria-label={it.ariaLabel}
            disabled={!!it.disabled}
            onClick={() => onChange && onChange(it.key)}
          >
            {it.icon ? (
              <span className="kole-m-tabbar__icon" aria-hidden="true">
                {it.icon}
              </span>
            ) : null}
            <span className="kole-m-tabbar__label">{it.label}</span>
            {it.badge ? <span className="kole-m-tabbar__badge">{it.badge}</span> : null}
            {it.dot ? <span className="kole-m-tabbar__badge is-dot" aria-label="有新消息" /> : null}
          </button>
        );
      })}
    </nav>
  );
}