interface ProgressBarProps {
  value: number;
  max: number;
  label?: string;
  tone?: "default" | "gold" | "success" | "danger";
  hideValue?: boolean;
}

export default function ProgressBar({
  value,
  max,
  label = "Progress",
  tone = "default",
  hideValue = false,
}: ProgressBarProps) {
  const safeMax = Math.max(0, max);
  const safeValue = Math.min(Math.max(0, value), safeMax);
  const percent = safeMax === 0 ? 0 : Math.round((safeValue / safeMax) * 100);

  return (
    <div className="progress-shell">
      <div className="progress-row">
        <span className="progress-label">{label}</span>
        {!hideValue ? (
          <span className="progress-value">
            {safeValue}/{safeMax}
          </span>
        ) : null}
      </div>
      <div
        aria-label={label}
        aria-valuemax={100}
        aria-valuemin={0}
        aria-valuenow={percent}
        className="progress-track"
        role="progressbar"
      >
        <span className="progress-fill" data-tone={tone} style={{ width: `${percent}%` }} />
      </div>
    </div>
  );
}