import type { UiServiceGroup } from "../../types";
import { Panel } from "../frames/Panel";
import { ServiceRow } from "./ServiceRow";
import { StatusStrip } from "./StatusStrip";

export interface ServicePanelProps {
  group: UiServiceGroup;
}

export function ServicePanel({ group }: ServicePanelProps) {
  return (
    <div
      className="service-panel"
      data-layout={group.layout || "list"}
      data-model-id={group.id}
    >
      <Panel title={group.title}>
        {group.summary?.length ? (
          <StatusStrip id={`${group.id}:summary`} items={group.summary} compact />
        ) : null}
        {group.services.map((service) => (
          <ServiceRow key={service.id} service={service} />
        ))}
      </Panel>
    </div>
  );
}