import clsx from "clsx";

export interface StatTileProps {
  label: string;
  /** pre-formatted value, e.g. "34.57" or "2–21" */
  value: string;
  /** rendered after the value, muted, e.g. "h" or "s" */
  suffix?: string;
  /** small mono sub-line */
  sub?: string;
  className?: string;
}

/**
 * Static stat tile for docs pages — visually identical to MetricCard but
 * server-rendered and string-valued (handles ranges like "2–21 s").
 */
export default function StatTile({
  label,
  value,
  suffix,
  sub,
  className,
}: StatTileProps) {
  return (
    <div
      className={clsx(
        "hairline spotlight-card depth-1 flex flex-col gap-1 rounded-sm bg-surface px-4 py-3",
        className,
      )}
    >
      <span className="text-[11px] uppercase tracking-[0.14em] text-muted">
        {label}
      </span>
      <span className="num text-2xl leading-none text-text">
        {value}
        {suffix && <span className="ml-0.5 text-base text-muted">{suffix}</span>}
      </span>
      {sub && <span className="num text-[11px] text-muted">{sub}</span>}
    </div>
  );
}