import { Check, Upload, Eye, Shield } from "lucide-react";

interface ProgressBarProps {
  currentStep: number;
  steps: string[];
}

export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
  // Icônes pour chaque étape
  const getStepIcon = (stepNumber: number, isCompleted: boolean) => {
    if (isCompleted) {
      return <Check className="h-3 w-3" />;
    }

    switch (stepNumber) {
      case 1:
        return <Upload className="h-3 w-3" />;
      case 2:
        return <Eye className="h-3 w-3" />;
      case 3:
        return <Shield className="h-3 w-3" />;
      default:
        return stepNumber;
    }
  };

  return (
    <div className="w-full max-w-2xl mx-auto mb-4 px-2">
      <div className="flex items-center justify-center">
        <div className="flex items-center justify-between w-full max-w-xs sm:max-w-md">
          {steps.map((step, index) => {
            const stepNumber = index + 1;
            const isCompleted = stepNumber < currentStep;
            const isCurrent = stepNumber === currentStep;

            return (
              <div key={index} className="flex items-center">
                {/* Step Circle */}
                <div className="flex flex-col items-center">
                  <div
                    className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all duration-300 ${
                      isCompleted
                        ? "bg-[#f7ab6e] text-white"
                        : isCurrent
                        ? "bg-[#f7ab6e] text-white ring-2 ring-[#f7ab6e] ring-opacity-20"
                        : "bg-gray-200 text-gray-500"
                    }`}
                  >
                    {getStepIcon(stepNumber, isCompleted)}
                  </div>
                  <span
                    className={`mt-1 text-[8px] sm:text-[10px] font-medium text-center max-w-[60px] sm:max-w-none leading-tight ${
                      isCompleted || isCurrent
                        ? "text-[#092727]"
                        : "text-gray-500"
                    }`}
                    style={{
                      wordBreak: 'break-word',
                      hyphens: 'auto'
                    }}
                  >
                    {step === "Anonymisation" ? (
                      <>
                        <span className="hidden sm:inline">Anonymisation</span>
                        <span className="sm:hidden">Anonym.</span>
                      </>
                    ) : (
                      step
                    )}
                  </span>
                </div>

                {/* Connector Line */}
                {index < steps.length - 1 && (
                  <div className="flex-1 mx-2 sm:mx-4">
                    <div
                      className={`h-0.5 w-6 sm:w-12 transition-all duration-300 ${
                        stepNumber < currentStep
                          ? "bg-[#f7ab6e]"
                          : "bg-gray-200"
                      }`}
                    />
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};