import React from 'react';
import { FaceRecognitionProps } from '../types';
import { useTranslation } from '../i18n/useTranslation';

interface ProgressIndicatorProps extends FaceRecognitionProps {
  progress: number;
}

export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ progress, lang }) => {

  const describ = useTranslation(lang)
  return (
    <div className="w-full">
      <div className="flex justify-between mb-2">
        <span className="text-sm font-medium text-gray-700">{describ.progressTitle}</span>
        <span className="text-sm font-medium text-indigo-600">{Math.round(progress)}%</span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2.5">
        <div 
          className="bg-indigo-600 h-2.5 rounded-full transition-all duration-300 ease-out"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
    </div>
  );
};