/* EquipmentList.jsx — rail vertical de equipos monitoreados
   Equivalente al "AssistantsList" de un kit de chat, pero para HVAC:
   cada item es una unidad con SKU, estado y lectura. */

function StatusDot({ status }) {
  const color = {
    operational: 'var(--success)',
    maintenance: 'var(--warning)',
    fault:       'var(--danger)',
    offline:     'var(--fg-subtle)',
  }[status] || 'var(--fg-subtle)';
  return <span className="ax-status-dot" style={{ background: color }} aria-hidden="true" />;
}

function EquipmentList({ items = [], selectedId, onSelect }) {
  return (
    <section className="ax-list" aria-label="Equipos monitoreados">
      <header className="ax-list__header">
        <span className="eyebrow">Equipos · {items.length}</span>
        <button className="ax-icon-btn" aria-label="Filtrar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 5h16M7 12h10M10 19h4"/></svg>
        </button>
      </header>

      <ul className="ax-list__items">
        {items.map(it => (
          <li key={it.id}>
            <button
              type="button"
              className={`ax-list-item ${selectedId === it.id ? 'is-selected' : ''}`}
              onClick={() => onSelect && onSelect(it.id)}
            >
              <div className="ax-list-item__row">
                <StatusDot status={it.status} />
                <span className="ax-list-item__name">{it.name}</span>
                <span className="ax-list-item__sku mono">{it.sku}</span>
              </div>
              <div className="ax-list-item__meta">
                <span>{it.client}</span>
                <span className="mono">{it.reading}</span>
              </div>
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}

window.EquipmentList = EquipmentList;
window.StatusDot = StatusDot;