source: lan-frontend/src/components/ComputerCard.jsx

import React from "react";

function dotClass(status) {
  if (status === "online") return "dot online";
  if (status === "idle") return "dot idle";
  return "dot offline";
}

export default function ComputerCard({ c, onOpen }) {
  return (
    <button className="card" onClick={() => onOpen?.(c)}>
      <div className="card-head">
        <div className="card-title">{c.name}</div>
        <div className={dotClass(c.status)} />
      </div>

      <div className="meta">
        <div><span className="dim">🏷 Env:</span> {c.env_name || "default"}</div>
        <div><span className="dim">👤 User:</span> {c.user || "—"}</div>
        <div><span className="dim">🌐 IP:</span> {c.ip || "—"}</div>
        <div><span className="dim">💻 OS:</span> {(c.os || "—").slice(0, 60)}</div>
        <div><span className="dim">⏰ Last:</span> {c.last_seen ? new Date(c.last_seen).toLocaleTimeString() : "—"}</div>
        <div><span className="dim">🛡 Sysmon:</span> {c.sysmon_available ? "Yes" : "No"} • {c.recent_sysmon ?? 0} events</div>
      </div>

      <div className="kpis">
        <div className="kpi">
          <div className="k">CPU avg</div>
          <div className="v">{c.avg_cpu ?? 0}%</div>
        </div>
        <div className="kpi">
          <div className="k">RAM avg</div>
          <div className="v">{c.avg_ram ?? 0}%</div>
        </div>
        <div className="kpi">
          <div className="k">Logs 24h</div>
          <div className="v">{c.recent_logs ?? 0}</div>
        </div>
      </div>
    </button>
  );
}