import React from 'react';
import { Container, Package, Terminal, CheckCircle2 } from 'lucide-react';
import { useSetupWizard } from '../SetupWizardContext';

const iconMap: Record<string, any> = {
  Container,
  Package,
  Terminal
};

export const ProgressIndicator: React.FC = () => {
  const { steps, currentStepIndex, stepValidation } = useSetupWizard();

  return (
    <div className="bg-[#f5f5f5] px-6 py-4">
      <div className="flex items-center justify-center gap-4">
        {steps.map((step, index) => {
          const IconComponent = step.icon ? iconMap[step.icon] : null;
          const validation = stepValidation.get(step.id);
          const isComplete = validation?.isComplete ?? false;
          const isCurrent = index === currentStepIndex;
          const isPast = index < currentStepIndex;

          return (
            <React.Fragment key={step.id}>
              <div className="flex flex-col items-center gap-2">
                <div
                  className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
                    isComplete
                      ? 'bg-green-600'
                      : isCurrent
                      ? 'bg-blue-600'
                      : 'bg-[#e0e0e0]'
                  }`}
                >
                  {isComplete ? (
                    <CheckCircle2 className="h-6 w-6 text-white" />
                  ) : IconComponent ? (
                    <IconComponent
                      className={`h-6 w-6 ${
                        isCurrent ? 'text-white' : 'text-[#999]'
                      }`}
                    />
                  ) : (
                    <span
                      className={`text-lg font-semibold ${
                        isCurrent ? 'text-white' : 'text-[#999]'
                      }`}
                    >
                      {index + 1}
                    </span>
                  )}
                </div>
                <span
                  className={`text-xs ${
                    isCurrent ? 'text-[#1a1a1a] font-medium' : 'text-[#666]'
                  }`}
                >
                  {step.title}
                </span>
              </div>
              {index < steps.length - 1 && (
                <div
                  className={`flex-1 h-0.5 transition-colors ${
                    isPast || isComplete ? 'bg-green-600' : 'bg-[#e0e0e0]'
                  }`}
                  style={{ maxWidth: '80px', marginBottom: '20px' }}
                />
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
};
