import type { ReactNode } from "react";

/** KPI：图标软底 + 数字 + 说明 */
export default function AdminStatCard({
  label,
  value,
  sub,
  hint,
  icon,
  color = "var(--accent)",
  soft = "var(--accent-soft)",
}: {
  label: string;
  value: ReactNode;
  sub?: string;
  hint?: string;
  icon: ReactNode;
  color?: string;
  soft?: string;
}) {
  return (
    <div className="panel p-4 sm:p-5 flex items-center gap-3">
      <span
        className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
        style={{ background: soft, color }}
        aria-hidden
      >
        {icon}
      </span>
      <div className="min-w-0 leading-tight">
        <p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
          {label}
        </p>
        <p className="text-[19px] sm:text-[22px] font-extrabold tabular-nums leading-none mt-1" style={{ color: "var(--ink)" }}>
          {value}
          {sub ? (
            <span className="ml-1.5 text-[11px] font-medium" style={{ color: "var(--ink-3)" }}>
              {sub}
            </span>
          ) : null}
        </p>
        {hint ? <p className="meta text-[12px] mt-1.5">{hint}</p> : null}
      </div>
    </div>
  );
}