interface ProgressStepsProps {
    classNames?: string;
    currentStep: number;
    steps: number;
}

const ProgressSteps = ({ classNames, currentStep, steps }: ProgressStepsProps) => {
    const progressWidth = (currentStep - 1) / (steps - 1) * 100;
  return (
    <div className={classNames}>
        <div className="relative flex justify-between">
            <div className="w-full h-2 bg-[#0525311A] absolute top-1/2 -translate-y-1/2 right-0  rounded-full -z-1">
                <div 
                    className="transition-[width] duration-300 h-full rounded-full bg-[#052531]"
                    style={{ width: `${progressWidth}%` }}
                />
            </div>

            {Array.from({ length: steps }, (_, index) => (
                <Step key={index} index={index + 1} currentStep={currentStep} />
            ))}
        </div>

        <div className='mt-1 flex justify-between text-[#1D293D] font-semibold text-sm'>
            <span>{currentStep} من {steps}</span>
            <span>{steps} من {steps}</span>
        </div>
    </div>
  );
};

const Step = ({index, currentStep}: {index: number, currentStep: number}) => {
    const isStepCompleted = index <= currentStep;
    return (
        <div 
            className={`transition-colors duration-300 w-6 h-6 flex justify-center items-center rounded-full border border-2`}
            style={{ backgroundColor: isStepCompleted? 'white' : '#9F9FA9', borderColor: isStepCompleted? '#052531' : '#D4D4D8' }}
        >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.6668 5L7.50016 14.1667L3.3335 10" stroke={isStepCompleted? '#052531': '#D4D4D8'} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
      </div>
    );
};

export default ProgressSteps;