// components/ui/ImpactStat.tsx
// SIGNATURE component (DESIGN.md). Oversized red Montserrat figure over a
// Poppins label. "Quantified hope made visual." Server-safe.
//
// Example:
//   <ImpactStat figure="128,826" label="Atenciones realizadas a nivel nacional" />

import * as React from "react";

export interface ImpactStatProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The big number, pre-formatted as a display string ("128,826", "732", "S/5"). */
  figure: React.ReactNode;
  /** The supporting Poppins label beneath the figure. */
  label: React.ReactNode;
  /** Visual alignment of the block. */
  align?: "left" | "center";
  /**
   * Figure type step. "primary" renders at the full stat-figure size (40px);
   * "secondary" renders at a smaller step (heading-lg) so a smaller-magnitude
   * number does not visually equate with a larger one.
   */
  size?: "primary" | "secondary";
}

export function ImpactStat({
  figure,
  label,
  align = "center",
  size = "primary",
  className = "",
  ...rest
}: ImpactStatProps) {
  const cls = [
    "flex flex-col gap-1",
    align === "center" ? "items-center text-center" : "items-start text-left",
    className,
  ]
    .filter(Boolean)
    .join(" ");
  const figureSizeCls =
    size === "secondary" ? "text-heading-lg" : "text-stat-figure";
  return (
    <div className={cls} {...rest}>
      <span
        className={`font-impact font-bold ${figureSizeCls} text-primary leading-none`}
      >
        {figure}
      </span>
      <span className="font-body text-body-lg text-ink-strong">{label}</span>
    </div>
  );
}