import { Badge } from "../common/Badge";
import { Card } from "../common/Card";
import { formatValue } from "../../lib/format";
import type { MetricValue } from "../../types";

interface LiveStatusBoardProps {
  status: MetricValue[];
}

export function LiveStatusBoard({ status }: LiveStatusBoardProps) {
  if (!status.length) {
    return null;
  }

  return (
    <Card title="Stan systemu" subtitle="Temperatura falownika i kontrola swiezosci odczytu">
      <div className="grid gap-3 sm:grid-cols-2">
        {status.map((metric) => (
          <div key={metric.metric_id} className="rounded-2xl border border-white/10 bg-slate-950/30 p-4">
            <div className="mb-3 flex items-center justify-between gap-3">
              <div className="text-sm font-medium text-white">{metric.label}</div>
              <Badge tone={metric.status}>{metric.status}</Badge>
            </div>
            <div className="text-sm text-slate-300">{formatValue(metric.value, metric.unit, metric.precision)}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}