import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faIdCard, faGraduationCap, faBriefcase } from '@fortawesome/free-solid-svg-icons';

const stepsData = [
    { step: 1, icon: faIdCard, title: 'Data Pribadi' },
    { step: 2, icon: faGraduationCap, title: 'Pilihan Studi' },
    { step: 3, icon: faBriefcase, title: 'Pekerjaan & Ortu' },
];

const StepIndicator = ({ currentStep, totalSteps }) => {
    return (
        <div className="flex items-center justify-between w-full mb-10 space-x-2">
            {stepsData.map(({ step, icon, title }) => {
                const isActive = step === currentStep;
                const isCompleted = step < currentStep;

                return (
                    <React.Fragment key={step}>
                        <div className="flex flex-col items-center flex-1 transition-all duration-300 z-10">
                            <div className={`p-4 rounded-full transition-colors duration-300 ${
                                isCompleted ? 'bg-indigo-600 text-white' : 
                                isActive ? 'bg-white border-2 border-indigo-500 text-indigo-700 shadow-xl' : 
                                'bg-gray-100 text-gray-500 border border-gray-300'
                            }`}>
                                <FontAwesomeIcon icon={icon} className="h-5 w-5" />
                            </div>
                            <p className={`mt-2 text-xs font-bold text-center ${isActive ? 'text-indigo-700' : (isCompleted ? 'text-gray-600' : 'text-gray-400')}`}>
                                {title}
                            </p>
                        </div>
                        {step < totalSteps && (
                            <div className={`flex-1 h-0.5 ${isCompleted ? 'bg-indigo-500' : 'bg-gray-300'} transition-colors duration-500 -mt-8`}></div>
                        )}
                    </React.Fragment>
                );
            })}
        </div>
    );
};

export default StepIndicator;
