import React from "react";

export function Meter({ value = 0, max = 100, label, showValue = false, className = "", ...props }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div className={["o-progress", className].filter(Boolean).join(" ")} data-slot="meter" role="meter" aria-valuenow={value} aria-valuemax={max} {...props}>
      {label || showValue ? (
        <div className="o-row" style={{ justifyContent: "space-between" }}>
          {label ? <span className="o-progress__label" data-slot="meter-label">{label}</span> : <span />}
          {showValue ? <span className="o-progress__value" data-slot="meter-value">{value} / {max}</span> : null}
        </div>
      ) : null}
      <span className="o-meter__track" data-slot="meter-track">
        <span className="o-meter__indicator" data-slot="meter-indicator" style={{ width: pct + "%", display: "block" }} />
      </span>
    </div>
  );
}
