frontend/src/components/generation/GenerationProgress.jsx

import React from 'react'

export default function GenerationProgress({ model, progress, isGenerating }) {
  if (!isGenerating) return null

  return (
    <div className="py-3">
      {model === 'ace-step' && (
        <div className="space-y-1.5">
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-400">Generating with ACE-Step...</span>
            {progress?.step && progress?.totalSteps && (
              <span className="font-mono text-accent-400">
                Step {progress.step}/{progress.totalSteps}
              </span>
            )}
          </div>
          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
            <div
              className="h-full bg-accent-500 rounded-full transition-all duration-300"
              style={{
                width: progress?.step && progress?.totalSteps
                  ? `${(progress.step / progress.totalSteps) * 100}%`
                  : '60%',
                animation: (!progress?.step) ? 'pulse 2s ease-in-out infinite' : 'none',
              }}
            />
          </div>
          <span className="text-[10px] text-gray-600">
            {progress?.estimateSeconds
              ? `~${progress.estimateSeconds}s remaining`
              : 'XL Turbo: ~20-60s depending on duration'}
          </span>
        </div>
      )}

      {model === 'musicgen' && (
        <div className="space-y-1.5">
          <span className="text-xs text-gray-400">Generating with MusicGen...</span>
          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
            <div
              className="h-full bg-accent-500 rounded-full"
              style={{
                width: '100%',
                animation: 'pulse 2s ease-in-out infinite',
                opacity: 0.7,
              }}
            />
          </div>
        </div>
      )}
    </div>
  )
}