import React from 'react';
import './pedalOCR.scss';

const OCRLoader = ({ isVisible, imageCount }) => {
  if (!isVisible) return null;

  return (
    <div className="ocr-loader">
      <div className="ocr-loader__content">
        <div className="ocr-loader__spinner"></div>
        
        <h3 className="ocr-loader__title">
          🔍 Processing Images
        </h3>
        
        <p className="ocr-loader__text">
          Analyzing {imageCount} image{imageCount > 1 ? 's' : ''}...
        </p>
        
        <div className="ocr-loader__dots">
          {[1, 2, 3].map((dot) => (
            <div key={dot} className={`ocr-loader__dot ocr-loader__dot--${dot}`} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default OCRLoader;