import { motion } from 'framer-motion';

interface ProgressBarProps {
  porcentaje: number;
  moduloNumero: number;
  showLabel?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export function ProgressBar({ 
  porcentaje, 
  moduloNumero, 
  showLabel = true,
  size = 'md' 
}: ProgressBarProps) {
  // Determinar color según progreso
  const getColor = () => {
    if (porcentaje < 30) return 'bg-red-500';
    if (porcentaje < 70) return 'bg-yellow-500';
    return 'bg-green-500';
  };

  // Determinar color del borde/fondo según progreso
  const getBgColor = () => {
    if (porcentaje < 30) return 'bg-red-100';
    if (porcentaje < 70) return 'bg-yellow-100';
    return 'bg-green-100';
  };

  const getTextColor = () => {
    if (porcentaje < 30) return 'text-red-700';
    if (porcentaje < 70) return 'text-yellow-700';
    return 'text-green-700';
  };

  const sizeClasses = {
    sm: 'h-2',
    md: 'h-4',
    lg: 'h-6',
  };

  return (
    <div className="w-full">
      {showLabel && (
        <div className="flex justify-between items-center mb-2">
          <span className="text-sm font-medium text-gray-700">
            Módulo {moduloNumero}
          </span>
          <span className={`text-sm font-bold ${getTextColor()}`}>
            {porcentaje}%
          </span>
        </div>
      )}
      
      <div className={`w-full ${getBgColor()} rounded-full overflow-hidden ${sizeClasses[size]}`}>
        <motion.div
          className={`${getColor()} ${sizeClasses[size]} rounded-full`}
          initial={{ width: 0 }}
          animate={{ width: `${porcentaje}%` }}
          transition={{ 
            duration: 0.8, 
            ease: "easeOut",
            delay: 0.2 
          }}
        />
      </div>
      
      {porcentaje === 100 && (
        <motion.p
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-xs text-green-600 mt-1 font-medium"
        >
          ¡Módulo completado!
        </motion.p>
      )}
    </div>
  );
}

export default ProgressBar;
