export function StatMeter({
  iconSrc,
  label,
  value,
  maxValue,
  tone,
}: {
  iconSrc?: string;
  label: string;
  value: number;
  maxValue: number;
  tone: 'health' | 'neutral' | 'danger';
}) {
  const percentage = Math.max(0, Math.min(100, (value / maxValue) * 100));

  return (
    <article className={`stat-meter tone-${tone}`}>
      <div className="stat-meter-copy">
        {iconSrc ? <img className="stat-meter-icon" src={iconSrc} alt="" aria-hidden="true" /> : null}
        <div>
        <span>{label}</span>
        <strong>
          {Math.round(value)}
          <small>/{Math.round(maxValue)}</small>
        </strong>
        </div>
      </div>
      <div className="meter-track">
        <div className="meter-fill" style={{ width: `${percentage}%` }} />
      </div>
    </article>
  );
}