import { useId } from "react";
import type { UiTelemetryCard } from "../types";
import { TelemetryCard } from "./TelemetryCard";

export interface TelemetryGridProps {
  cards: UiTelemetryCard[];
}

export function TelemetryGrid({ cards }: TelemetryGridProps) {
  const headingId = useId();
  const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;

  return (
    <section className="telemetry-section" aria-labelledby={headingId}>
      <header className="telemetry-section__header">
        <div>
          <p>Signal Matrix</p>
          <h2 id={headingId}>Telemetry</h2>
        </div>
        <span>{metricCount}</span>
      </header>
      <div className="telemetry-grid">
        {cards.map((card, index) => (
          <TelemetryCard key={card.id} card={card} index={index + 1} />
        ))}
      </div>
    </section>
  );
}