import { formatVND, formatVNDSigned } from "@/lib/finance";
import type { LucideIcon } from "lucide-react";

export function KpiCard(props: {
  icon: LucideIcon;
  label: string;
  value: number;
  changePct?: number;
  changeLabel?: string;
  tone?: "up" | "down" | "neutral";
  valueOverride?: string;
  /** KPI thể hiện chênh lệch (dòng tiền ròng, thay đổi dự báo...): hiện +5.000.000 đ / -5.000.000 đ. */
  signed?: boolean;
}) {
  const { icon: Icon, label, value, changePct, changeLabel, tone = "neutral", valueOverride, signed } = props;
  const toneClass = tone === "up" ? "kpi-up" : tone === "down" ? "kpi-down" : "text-slate-500";
  const displayValue = valueOverride ?? (signed ? formatVNDSigned(value) : formatVND(value));
  return (
    <div className="card p-5 flex flex-col gap-2">
      <div className="flex items-center gap-2 text-slate-500 text-sm">
        <Icon size={20} strokeWidth={1.75} className="text-slate-400" />
        {label}
      </div>
      <div className="text-2xl font-bold text-slate-800">{displayValue}</div>
      {changePct !== undefined && (
        <div className={`text-xs font-medium ${toneClass}`}>
          {changePct >= 0 ? "↑" : "↓"} {Math.abs(changePct).toFixed(0)}% {changeLabel ?? "so với kỳ trước"}
        </div>
      )}
    </div>
  );
}