import { useInfoSocket } from "../../../app/context/WebSocketContext";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";

const SystemStatusCard = () => {
  const { data: stats } = useInfoSocket();

  return (
    <Card className="p-4 w-[40%]">
      <CardHeader title="Overview" />
      {stats ? (
        <>
          <div>UTC: {stats["system-clock-utc"]}</div>
          <div>Local: {stats["system-clock-local"]}</div>
          <span>CPU: {stats["memory-cpu-status"]}</span>
          <span>Threads: {stats["thread-count"]}</span>
        </>
      ) : (
        <span className="text-slate-500">Loading system status…</span>
      )}
      <div className="text-sm flex gap-4"></div>
    </Card>
  );
};

export default SystemStatusCard;