import type { CSSProperties } from "react";
import { clampPercent } from "../../format";
import type { UiSeverity } from "../../types";

export interface ProgressMeterProps {
  value?: number;
  severity?: UiSeverity;
  label?: string;
}

export function ProgressMeter({
  value,
  severity = "neutral",
  label = "Progress",
}: ProgressMeterProps) {
  const progress = value === undefined ? null : clampPercent(value);

  return (
    <div
      className="progress-meter"
      data-severity={severity}
      role="meter"
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={progress ?? undefined}
      data-empty={progress === null}
    >
      {progress !== null ? (
        <span style={{ "--meter-progress": `${progress}%` } as CSSProperties} />
      ) : null}
    </div>
  );
}