<script lang="ts">
  import type { UiTelemetryCard } from "../types";
  import TelemetryCard from "./TelemetryCard.svelte";

  let { cards }: { cards: UiTelemetryCard[] } = $props();
</script>

<section class="telemetry-grid" aria-label="Telemetry">
  {#each cards as card (card.id)}
    <TelemetryCard {card} />
  {/each}
</section>

<style>
  .telemetry-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    border: var(--ui-border);
    background: var(--ui-color-line);
  }

  @media (max-width: 1100px) {
    .telemetry-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .telemetry-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
</style>
