import type { ReactElement } from "react";
import { MetricsStrip, type MetricCell } from "@mosaic/ui";

const cells: MetricCell[] = [
  {
    label: "Active Agents",
    value: "47",
    color: "var(--ms-blue-400)",
    trend: { direction: "up", text: "↑ +3 from yesterday" },
  },
  {
    label: "Tasks Completed",
    value: "1,284",
    color: "var(--ms-teal-400)",
    trend: { direction: "up", text: "↑ +128 today" },
  },
  {
    label: "Avg Response Time",
    value: "2.4s",
    color: "var(--ms-purple-400)",
    trend: { direction: "down", text: "↓ -0.3s improved" },
  },
  {
    label: "Token Usage",
    value: "3.2M",
    color: "var(--ms-amber-400)",
    trend: { direction: "neutral", text: "78% of budget" },
  },
  {
    label: "Error Rate",
    value: "0.4%",
    color: "var(--ms-red-400)",
    trend: { direction: "down", text: "↓ -0.1% improved" },
  },
  {
    label: "Active Projects",
    value: "8",
    color: "var(--ms-cyan-500)",
    trend: { direction: "neutral", text: "2 deploying" },
  },
];

export function DashboardMetrics(): ReactElement {
  return <MetricsStrip cells={cells} />;
}