import React from 'react';

interface StepIndicatorProps {
    currentStep: number;
    highestStep: number;
    onStepClick: (step: number) => void;
    t: {
        title: string;
        steps: string[];
    }
}

const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, highestStep, onStepClick, t }) => {
    
    const steps = t.steps.map((name, index) => ({ id: index + 1, name }));

    return (
        <div className="bg-light-secondary dark:bg-brand-secondary p-4 rounded-lg shadow-md border border-light-accent dark:border-brand-accent">
            <h3 className="font-bold text-lg mb-4">{t.title}</h3>
            <ol className="space-y-3">
                {steps.map((step) => {
                    const isCompleted = step.id < currentStep;
                    const isActive = step.id === currentStep;
                    const isClickable = step.id <= highestStep;

                    return (
                        <li 
                            key={step.id} 
                            className={`flex items-center p-1 rounded-md transition-colors ${isClickable ? 'cursor-pointer hover:bg-light-accent dark:hover:bg-brand-accent' : 'cursor-default'}`}
                            onClick={() => isClickable && onStepClick(step.id)}
                        >
                            <span className={`flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full mr-3 text-sm font-bold ${
                                isCompleted ? 'bg-green-500 text-white' : 
                                isActive ? 'bg-brand-highlight text-white ring-2 ring-offset-2 ring-offset-light-secondary dark:ring-offset-brand-secondary ring-brand-highlight' : 
                                'bg-light-accent dark:bg-brand-accent text-light-text dark:text-brand-text'
                            }`}>
                                {isCompleted ? '✓' : step.id}
                            </span>
                            <span className={`font-medium ${isActive ? 'text-light-text dark:text-white' : 'text-light-subtle dark:text-brand-light'}`}>
                                {step.name}
                            </span>
                        </li>
                    )
                })}
            </ol>
        </div>
    );
};

export default StepIndicator;