src/scrollingTranscript/components/ProgressBar.tsx

import React, { useEffect, useState } from 'react';

interface ProgressBarProps {
  duration: number;
  isActive: boolean;
  onComplete?: () => void;
}

const ProgressBar: React.FC<ProgressBarProps> = ({ 
  duration, 
  isActive, 
  onComplete 
}) => {
  const [progress, setProgress] = useState(0);
  
  useEffect(() => {
    if (!isActive) {
      setProgress(0);
      return;
    }
    
    setProgress(0);
    
    const interval = setInterval(() => {
      setProgress(prevProgress => {
        const newProgress = prevProgress + (100 / (duration * 10));
        
        if (newProgress >= 100) {
          clearInterval(interval);
          if (onComplete) onComplete();
          return 100;
        }
        
        return newProgress;
      });
    }, 100);
    
    return () => clearInterval(interval);
  }, [duration, isActive, onComplete]);
  
  return (
    <div className="progress-container">
      <div 
        className="progress-bar"
        style={{ width: `${progress}%` }}
      />
    </div>
  );
};

export default ProgressBar;