import type { ReactNode } from "react";
import { AppListSection, AppListTile } from "../../ui";

export type MetricItem = {
  label: string;
  value: ReactNode;
  warn?: boolean;
};

type Props = {
  items: MetricItem[];
};

export function MetricGrid({ items }: Props) {
  return (
    <AppListSection header="Сводка">
      {items.map((item) => (
        <AppListTile
          key={item.label}
          title={item.label}
          value={<span className={item.warn ? "is-warn" : undefined}>{item.value}</span>}
        />
      ))}
    </AppListSection>
  );
}