/**
 * ProgressBar Component
 * 
 * Real-time progress indicator for progressive loading
 */

import React from 'react';
import { useTranslation } from 'react-i18next';

interface Props {
  progress: number; // 0-100
  loadedCount: number;
  totalCount: number;
  className?: string;
}

export default function ProgressBar({ progress, loadedCount, totalCount, className = '' }: Props) {
  const { t } = useTranslation();
  
  return (
    <div className={`bg-white border border-gray-200 rounded-lg p-4 shadow-sm ${className}`}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-gray-700">
          {t('loading_variations')}
        </span>
        <span className="text-sm text-gray-500">
          {loadedCount} / {totalCount} ({progress}%)
        </span>
      </div>
      
      <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
        <div
          className="bg-blue-600 h-2 rounded-full transition-all duration-300 ease-out"
          style={{ width: `${progress}%` }}
        />
      </div>
      
      <p className="text-xs text-gray-500 mt-2">
        {t('progressive_load_info')}
      </p>
    </div>
  );
}