import React from 'react';
import { formatTime } from '../utils/formatters';

const MachinesCard = ({ machines, onShowHelp }) => {
  if (!machines || machines.length === 0) {
    return (
      <div className="card">
        <h3>
          Machines
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No machines detected</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <h3>
        Machines
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        <ul className="machine-list">
          {machines.map((machine, index) => (
            <li key={index} className="machine-item">
              <div>
                <div className="machine-id">{machine.machineId}</div>
                <div className="machine-time">
                  <span style={{ color: '#059669' }}>hb:</span> {formatTime(machine.lastHeartbeatUtc)} | 
                  <span style={{ color: '#3b82f6' }}> ft:</span> {formatTime(machine.firstSeenUtc)}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default MachinesCard;