import type { UiStatusItem } from "../../types";
import { FooterCell } from "../frames/FooterCell";

export interface StatusStripProps {
  id?: string;
  items: UiStatusItem[];
  compact?: boolean;
}

export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
  return (
    <section
      className="status-strip"
      data-compact={compact}
      data-model-id={id}
      data-variant={compact ? "cluster" : "system-bus"}
    >
      {items.map((item) => (
        <FooterCell key={item.id} item={item} />
      ))}
    </section>
  );
}