import React from 'react';
import { formatDeviceId, getDeviceInfo } from '../utils/formatters';

const DeviceTrustCard = ({ trustedDevices, onShowHelp }) => {
  if (!trustedDevices || trustedDevices.length === 0) {
    return (
      <div className="card">
        <h3>
          Device Trust (Top Observed)
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No devices observed</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <h3>
        Device Trust (Top Observed)
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        <ul className="device-list">
          {trustedDevices.map((device, index) => {
            const deviceInfo = getDeviceInfo(device.vid, device.pid);
            const deviceId = formatDeviceId(device.vid, device.pid);
            
            return (
              <li key={index} className="device-item">
                <div>
                  <div className="device-id">{deviceId}</div>
                  <div className="muted" style={{ fontSize: '12px', marginTop: '2px' }}>
                    {deviceInfo.fullName}
                  </div>
                </div>
                <div className="device-count">{device.count}</div>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default DeviceTrustCard;