import * as React from "react";
import { cn } from "@/lib/utils";

export interface KpiProps {
  label: string;
  value: React.ReactNode;
  hint?: React.ReactNode;
  icon?: React.ReactNode;
  tone?: "default" | "success" | "warning" | "danger" | "info";
  className?: string;
}

const toneRing: Record<NonNullable<KpiProps["tone"]>, string> = {
  default: "ring-border",
  success: "ring-success/30",
  warning: "ring-warning/30",
  danger: "ring-destructive/30",
  info: "ring-info/30",
};

const toneIcon: Record<NonNullable<KpiProps["tone"]>, string> = {
  default: "text-foreground/60 bg-muted",
  success: "text-success bg-success/15",
  warning: "text-warning bg-warning/15",
  danger: "text-destructive bg-destructive/15",
  info: "text-info bg-info/15",
};

export function Kpi({ label, value, hint, icon, tone = "default", className }: KpiProps) {
  return (
    <div
      className={cn(
        "surface p-5 ring-1 transition-shadow hover:shadow-soft",
        toneRing[tone],
        className,
      )}
    >
      <div className="flex items-center justify-between gap-3">
        <span className="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
          {label}
        </span>
        {icon && (
          <span
            className={cn(
              "flex h-8 w-8 items-center justify-center rounded-md",
              toneIcon[tone],
            )}
          >
            {icon}
          </span>
        )}
      </div>
      <div className="mt-3 text-3xl font-semibold tracking-tight text-balance">{value}</div>
      {hint && <div className="mt-1 text-xs text-muted-foreground">{hint}</div>}
    </div>
  );
}