import React from "react";

/**
 * @param {{
 *   label: string,
 *   value: string | number,
 *   hint?: string,
 *   tone?: string,
 *   onClick?: () => void,
 * }} props
 */
export default function UserStatCard({ label, value, hint, tone = "", onClick }) {
  const className = `swi-user-stat-card${tone ? ` swi-user-stat-card--${tone}` : ""}${onClick ? " swi-user-stat-card--clickable" : ""}`;

  const content = (
    <>
      <span className="swi-user-stat-card__value">{value}</span>
      <span className="swi-user-stat-card__label">{label}</span>
      {hint ? <span className="swi-user-stat-card__hint">{hint}</span> : null}
    </>
  );

  if (onClick) {
    return (
      <button
        type="button"
        className={className}
        onClick={onClick}
        aria-label={`${label}: ${value}. ${hint || "Open details."}`}
      >
        {content}
      </button>
    );
  }

  return <article className={className}>{content}</article>;
}
