Infrastructure Monitor

import { LineChart, GaugeChart, BarChart, AreaChart, Sparkline } from "@chartts/react"

export function InfraMonitor() {
  const { cpu, memory, requests, health } = useMetrics()

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-4 gap-3">
        <KPI label="CPU" value="42%" sparkline={cpu.recent} />
        <KPI label="Memory" value="6.2 GB" sparkline={memory.recent} />
        <KPI label="Req/s" value="2,841" />
        <KPI label="Errors" value="0.04%" />
      </div>
      <div className="grid grid-cols-3 gap-4">
        <LineChart data={metrics} x="time" y={["cpu","memory"]} className="col-span-2 h-72" />
        <GaugeChart value={health} max={100} className="h-72" />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <BarChart data={endpoints} x="path" y={["success","errors"]} className="h-64" />
        <AreaChart data={latency} x="time" y={["p50","p99"]} className="h-64" />
      </div>
    </div>
  )
}