import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
import { canvasGenerationProgressStyle } from "./canvasUtils";

type NodeGenStatus = "submitting" | "running" | "success" | "error";

interface CanvasSmoothedProgressRingProps {
  progress: number;
  status: NodeGenStatus;
  message?: string;
}

export function CanvasSmoothedProgressRing({ progress, status, message }: CanvasSmoothedProgressRingProps) {
  const smoothed = useSmoothedProgress(progress, status);
  return (
    <div
      className="studio-canvas-node-generation-progress"
      role="status"
      aria-live="polite"
      style={canvasGenerationProgressStyle(smoothed)}
    >
      <span className="studio-canvas-node-generation-progress__ring" aria-hidden="true" />
      <strong>{message}</strong>
      <em>{smoothed}%</em>
    </div>
  );
}
