<script lang="ts">
  import type { UiServiceGroup } from "../types";
  import Panel from "./Panel.svelte";
  import ServiceRow from "./ServiceRow.svelte";
  import StatusStrip from "./StatusStrip.svelte";

  let { group }: { group: UiServiceGroup } = $props();
</script>

<Panel title={group.title}>
  {#if group.summary?.length}
    <StatusStrip items={group.summary} compact />
  {/if}
  {#each group.services as service (service.id)}
    <ServiceRow {service} />
  {/each}
</Panel>
