"use client";

type KpiColor = "neutral" | "amber" | "green" | "red" | "blue";

const BG: Record<KpiColor, string> = {
  neutral: "#f9fafb",
  amber: "#fef3c7",
  green: "#dcfce7",
  red: "#fee2e2",
  blue: "#dbeafe",
};

const FG: Record<KpiColor, string> = {
  neutral: "#374151",
  amber: "#b45309",
  green: "#15803d",
  red: "#b91c1c",
  blue: "#1d4ed8",
};

interface Props {
  value: string;
  label: string;
  color?: KpiColor;
}

export function KpiCard({ value, label, color = "neutral" }: Props) {
  return (
    <div
      style={{
        padding: "12px 16px",
        background: BG[color],
        borderRadius: 10,
        minWidth: 0,
      }}
    >
      <div
        style={{
          fontSize: 20,
          fontWeight: 700,
          color: FG[color],
          lineHeight: 1.2,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {value}
      </div>
      <div
        style={{
          fontSize: 11,
          color: "#6b7280",
          marginTop: 4,
          lineHeight: 1.4,
        }}
      >
        {label}
      </div>
    </div>
  );
}
