import { type FC } from 'react';

interface StepIndicatorProps {
    step: number;
    currentStep: number;
    title: string;
}

const StepIndicator: FC<StepIndicatorProps> = ({ step, currentStep, title }) => {
    const isCompleted = step < currentStep;
    const isActive = step === currentStep;

    return (
        <div className="flex items-center space-x-2">
            {/* دایره اصلی */}
            <div className={`w-8 h-8 rounded-full flex items-center justify-center border-2 ${isCompleted
                ? 'bg-gray-900 border-gray-900'
                : isActive
                    ? 'bg-gray-900 border-gray-900'
                    : 'bg-white border-gray-300'
                }`}>
                {isCompleted ? (
                    <span className="text-white text-xs">✓</span>
                ) : (
                    <span className={`text-xs font-medium ${isActive ? 'text-white' : 'text-gray-400'}`}>
                        {step}
                    </span>
                )}
            </div>

            {/* متن عنوان */}
            <span className={`text-sm font-medium ${isCompleted || isActive
                ? 'text-gray-900'
                : 'text-gray-500'
                }`}>
                {title}
            </span>
        </div>
    );
};

export default StepIndicator;