"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;
  /**
   * Опциональная подпись под значением (caption-токен 12/16, --fg-tertiary).
   * Видимая (не hover) — для честных квалификаторов вроде «оценочный».
   */
  caption?: string;
}

export function KpiCard({ value, label, color = "neutral", caption }: 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>
      {caption ? (
        <div
          style={{
            fontSize: 12,
            lineHeight: "16px",
            color: "var(--fg-tertiary)",
            marginTop: 2,
          }}
        >
          {caption}
        </div>
      ) : null}
      <div
        style={{
          fontSize: 11,
          color: "#6b7280",
          marginTop: 4,
          lineHeight: 1.4,
        }}
      >
        {label}
      </div>
    </div>
  );
}