import React from 'react';

const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
  const steps = [
    { number: 1, title: 'Personal Info' },
    { number: 2, title: 'Preferences' },
    { number: 3, title: 'Directory' },
    { number: 4, title: 'Account' }
  ];

  return (
    <div className="mb-8">
      {/* Progress Bar */}
      <div className="flex items-center justify-between relative">
        {steps.map((step, index) => (
          <React.Fragment key={step.number}>
            {/* Step Circle */}
            <div className="flex flex-col items-center relative z-10">
              <div className={`
                w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
                transition-all duration-300
                ${currentStep === step.number
                  ? 'bg-[var(--orange-light)] text-white scale-110 shadow-lg'
                  : currentStep > step.number
                    ? 'bg-[var(--green-light)] text-white'
                    : 'bg-[var(--neutral-800)] text-brand-purple '
                }
              `}>
                {currentStep > step.number ? '✓' : step.number}
              </div>
              <span className={`
                text-sm mt-2 font-medium transition-colors
                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-brand-purple '}
              `} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                {step.title}
              </span>
            </div>

            {/* Connecting Line */}
            {index < steps.length - 1 && (
              <div className="flex-1 h-1 mx-2 relative -top-6 bg-[var(--neutral-800)]">
                <div
                  className={`
                    h-full transition-all duration-500
                    ${currentStep > step.number ? 'bg-[var(--green-light)] w-full' : 'bg-transparent w-0'}
                  `}
                />
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      {/* Step Counter */}
      <p className="text-center text-brand-purple  mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
        Step <span className="font-semibold text-[var(--orange-light)]">{currentStep}</span> of {totalSteps}
      </p>
    </div>
  );
};

export default RegistrationStepIndicator;