// frontend/src/components/StepIndicator.jsx
import React from 'react';
import { CheckIcon } from '@heroicons/react/24/solid';

const StepIndicator = ({ activeStep, steps }) => {
    return (
        <div className="flex justify-between items-center mb-8">
            {steps.map((step, index) => {
                const stepNumber = index + 1;
                const isCompleted = stepNumber < activeStep;
                const isActive = stepNumber === activeStep;
                
                return (
                    <div key={step} className="flex-1 relative">
                        <div className="flex flex-col items-center">
                            <div className={`
                                w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all
                                ${isCompleted ? 'bg-primary-600 text-white' : 
                                  isActive ? 'bg-primary-600 text-white ring-4 ring-primary-200' : 
                                  'bg-gray-200 dark:bg-gray-700 text-gray-500'}
                            `}>
                                {isCompleted ? <CheckIcon className="w-5 h-5" /> : stepNumber}
                            </div>
                            <div className="mt-2 text-sm font-medium hidden sm:block">{step}</div>
                        </div>
                        {index < steps.length - 1 && (
                            <div className={`absolute top-5 left-1/2 w-full h-0.5 -translate-y-1/2 ${
                                stepNumber < activeStep ? 'bg-primary-600' : 'bg-gray-200 dark:bg-gray-700'
                            }`} />
                        )}
                    </div>
                );
            })}
        </div>
    );
};

export default StepIndicator;