import type { WidgetTranslations } from '../i18n';

interface ProcessingViewProps {
  progress: number;
  clothingImage?: string;
  t: WidgetTranslations['processing'];
}

export function ProcessingView({ progress, clothingImage, t }: ProcessingViewProps) {
  const displayProgress = Math.min(Math.max(progress, 0), 100);

  return (
    <div className="aisthetix-processing">
      <div className="aisthetix-processing-content">
        {clothingImage && (
          <div className="aisthetix-processing-preview">
            <img
              src={clothingImage}
              alt={t.title}
              className="aisthetix-processing-image"
            />
            <div className="aisthetix-processing-overlay">
              <div className="aisthetix-spinner-large" />
            </div>
          </div>
        )}

        <div className="aisthetix-processing-info">
          <h3>{t.title}</h3>
          <p>{t.subtitle}</p>

          <div className="aisthetix-progress-container">
            <div className="aisthetix-progress-bar">
              <div
                className="aisthetix-progress-fill"
                style={{ width: `${displayProgress}%` }}
              />
            </div>
            <span className="aisthetix-progress-text">{displayProgress}%</span>
          </div>

          <div className="aisthetix-processing-steps">
            <div
              className={`aisthetix-step ${progress >= 0 ? 'active' : ''} ${
                progress >= 30 ? 'completed' : ''
              }`}
            >
              <span className="aisthetix-step-dot" />
              <span>{t.step1}</span>
            </div>
            <div
              className={`aisthetix-step ${progress >= 30 ? 'active' : ''} ${
                progress >= 70 ? 'completed' : ''
              }`}
            >
              <span className="aisthetix-step-dot" />
              <span>{t.step2}</span>
            </div>
            <div
              className={`aisthetix-step ${progress >= 70 ? 'active' : ''} ${
                progress >= 100 ? 'completed' : ''
              }`}
            >
              <span className="aisthetix-step-dot" />
              <span>{t.step3}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}