import { Card } from "../common/Card";
import { ValuePair } from "../common/ValuePair";
import type { SnapshotGroupRow } from "../../types";

interface PhaseGridProps {
  rows: SnapshotGroupRow[];
}

export function PhaseGrid({ rows }: PhaseGridProps) {
  return (
    <Card title="Fazy AC" subtitle="Napiece, prady i moce pozorne na falowniku">
      <div className="grid gap-4 md:grid-cols-3">
        {rows.map((row) => (
          <div key={row.id} className="rounded-3xl border border-white/10 bg-slate-950/40 p-4">
            <div className="mb-4 text-sm font-semibold text-white">{row.label}</div>
            <div className="grid gap-3">
              <ValuePair metric={row.values.voltage} />
              <ValuePair metric={row.values.current} />
              <ValuePair metric={row.values.apparent_power} />
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}