frontend/src/components/ProgressBar.jsx

function ProgressBar({ status, progress, duration, resolution }) {
    const formatDuration = (seconds) => {
        if (!seconds) return null
        const mins = Math.floor(seconds / 60)
        const secs = Math.floor(seconds % 60)
        return `${mins}:${secs.toString().padStart(2, '0')}`
    }

    return (
        <div className="progress-container">
            <div className="progress-header">
                <div className="progress-status">
                    <span className={`status-dot ${status}`} />
                    <span className="status-text">{status || 'Waiting'}</span>
                </div>
                <span className="progress-percent">{progress.toFixed(1)}%</span>
            </div>

            <div className="progress-bar-track">
                <div
                    className="progress-bar-fill"
                    style={{ width: `${progress}%` }}
                />
            </div>

            {(duration || resolution) && (
                <div className="progress-meta">
                    {duration && <span>Duration: {formatDuration(duration)}</span>}
                    {resolution && <span>Resolution: {resolution}</span>}
                </div>
            )}
        </div>
    )
}

export default ProgressBar