"use client";

// کارتِ آماریِ سربرگ — مقدارِ عددی LTR، واحد (مثلاً «تومان») جدا و RTL.
export default function StatCard({
  label,
  value,
  suffix,
  icon,
  color = "var(--gold)",
  sub,
  loading,
}: {
  label: string;
  value?: React.ReactNode;
  suffix?: string;
  icon?: React.ReactNode;
  color?: string;
  sub?: React.ReactNode;
  loading?: boolean;
}) {
  return (
    <div className="card p-4 flex flex-col gap-2 min-w-0">
      <div className="flex items-center justify-between gap-2">
        <span className="text-xs text-[#8ab4e8]">{label}</span>
        {icon && <span style={{ color }}>{icon}</span>}
      </div>
      {loading ? (
        <div className="skeleton h-7 w-28" />
      ) : (
        <div className="flex items-baseline gap-1.5 flex-wrap">
          <span className="text-xl font-bold" style={{ color }}>
            <span dir="ltr">{value ?? "—"}</span>
          </span>
          {suffix && <span className="text-[11px] text-[#8ab4e8]">{suffix}</span>}
        </div>
      )}
      {sub && <div className="text-[11px] text-[#6f90bd]">{sub}</div>}
    </div>
  );
}