/**
 * Composant réutilisable pour afficher l'avancement d'un chantier
 */

import React from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { AVANCEMENT_CONFIG, COMMON_CLASSES } from './ChantierStyles';

interface ChantierProgressBarProps {
  value: number;
  showValue?: boolean;
  showPercentage?: boolean;
  size?: 'small' | 'normal' | 'large';
  showCompletionIcon?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const ChantierProgressBar: React.FC<ChantierProgressBarProps> = ({
  value,
  showValue = false,
  showPercentage = true,
  size = 'normal',
  showCompletionIcon = true,
  className = '',
  style = {}
}) => {
  // Déterminer la configuration couleur selon l'avancement
  const getProgressConfig = () => {
    if (value < AVANCEMENT_CONFIG.CRITIQUE.threshold) return AVANCEMENT_CONFIG.CRITIQUE;
    if (value < AVANCEMENT_CONFIG.ATTENTION.threshold) return AVANCEMENT_CONFIG.ATTENTION;
    if (value < AVANCEMENT_CONFIG.PROGRES.threshold) return AVANCEMENT_CONFIG.PROGRES;
    return AVANCEMENT_CONFIG.TERMINE;
  };

  const config = getProgressConfig();
  
  const sizeConfig = {
    small: { height: '8px', fontSize: 'text-xs' },
    normal: { height: '16px', fontSize: 'text-sm' },
    large: { height: '20px', fontSize: 'text-base' }
  };

  const currentSize = sizeConfig[size];

  return (
    <div className={`${COMMON_CLASSES.PROGRESS_CONTAINER} ${className}`} style={style}>
      <div className="w-full">
        <ProgressBar
          value={value}
          showValue={showValue}
          style={{ height: currentSize.height }}
          className={`progress-${size}`}
        />
      </div>
      
      {showPercentage && (
        <span className={`ml-2 font-bold ${currentSize.fontSize} ${config.textColor}`}>
          {value}%
        </span>
      )}
      
      {showCompletionIcon && value === 100 && (
        <i className="pi pi-check-circle text-green-500 text-xl ml-2" />
      )}
    </div>
  );
};

export default ChantierProgressBar;