import { User, Camera, Check } from 'lucide-react';

interface Step {
  id: number;
  label: string;
  icon: React.ElementType;
}

interface StepIndicatorProps {
  currentStep: number;
  steps?: Step[];
}

const DEFAULT_STEPS: Step[] = [
  { id: 1, label: 'Personal', icon: User },
  { id: 2, label: 'Avatar', icon: Camera },
];

export function StepIndicator({ currentStep, steps = DEFAULT_STEPS }: StepIndicatorProps) {
  return (
    <div className="flex items-center justify-center gap-2 mb-8">
      {steps.map((step, index) => {
        const Icon = step.icon;
        const isCompleted = step.id < currentStep;
        const isCurrent = step.id === currentStep;

        return (
          <div key={step.id} className="flex items-center">
            <div className="flex flex-col items-center">
              <div
                className={`flex h-12 w-12 items-center justify-center rounded-full transition-all duration-300 ${
                  isCurrent
                    ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/30'
                    : isCompleted
                    ? 'bg-performance-green text-white'
                    : 'bg-iron-gray border border-charcoal-outline text-gray-500'
                }`}
              >
                {isCompleted ? (
                  <Check className="w-5 h-5" />
                ) : (
                  <Icon className="w-5 h-5" />
                )}
              </div>
              <span
                className={`mt-2 text-xs font-medium ${
                  isCurrent ? 'text-white' : isCompleted ? 'text-performance-green' : 'text-gray-500'
                }`}
              >
                {step.label}
              </span>
            </div>
            {index < steps.length - 1 && (
              <div
                className={`w-16 h-0.5 mx-4 mt-[-20px] ${
                  isCompleted ? 'bg-performance-green' : 'bg-charcoal-outline'
                }`}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}