import { toneText, type Tone } from "./tokens";
import { DashboardSection } from "./DashboardSection";
import type { BadgeTone } from "./tokens";

export type InfoRow = {
  label: string;
  value: string;
  tone?: Tone;
};

interface DashboardInfoBlockProps {
  title: string;
  infoText?: string;
  badge?: { text: string; tone: BadgeTone };
  rows: InfoRow[];
}

/**
 * Labeled key/value block used for Workload, Throughput, Gateway Health.
 * Tone → color is a lookup, not a ternary chain.
 */
export function DashboardInfoBlock({ title, infoText, badge, rows }: DashboardInfoBlockProps) {
  return (
    <DashboardSection title={title} infoText={infoText} badge={badge}>
      <div className="divide-y divide-[color:var(--border)] rounded-lg surface-muted overflow-hidden">
        {rows.map((row) => (
          <div
            key={`${row.label}-${row.value}`}
            className="flex items-start justify-between gap-3 px-3 py-2"
          >
            <span className="min-w-0 text-sm text-muted">{row.label}</span>
            <span className={`max-w-[65%] break-words text-right text-sm font-medium leading-5 ${toneText[row.tone ?? "default"]}`}>
              {row.value}
            </span>
          </div>
        ))}
      </div>
    </DashboardSection>
  );
}
