edr-platform/apps/edr-freight-web/backoffice/src/components/overview/OverviewKpiStrip.tsx

import { KpiStrip, type KpiItem } from "@/components/page";

import type { OverviewKpiItem } from "./OverviewKpiCard";

/**
 * Map the overview accent vocabulary onto brand / Mantine palette colors so the
 * shared KpiStrip renders a flat tinted icon chip per cell — no gradients,
 * gauges or sparklines.
 */
const ACCENT_COLOR: Record<string, string> = {
  default: "edr-green",
  emerald: "edr-green",
  amber: "yellow",
  rose: "red",
  sky: "blue",
  violet: "violet",
  gold: "yellow",
  orange: "orange",
};

interface OverviewKpiStripProps {
  items: OverviewKpiItem[];
}

/** Clean KPI strip for the overview tabs — delegates to the shared KpiStrip. */
export function OverviewKpiStrip({ items }: OverviewKpiStripProps) {
  const kpiItems: KpiItem[] = items.map((item) => ({
    label: item.label,
    value: item.value,
    icon: item.icon,
    hint: item.hint,
    color: ACCENT_COLOR[item.accent ?? "default"] ?? "edr-green",
  }));

  return <KpiStrip items={kpiItems} />;
}