import React from "react";
import { cn, STEPS } from "../lib/utils";

interface StepIndicatorProps {
  currentStep: number;
  errors: number[];
}

const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, errors }) => (
  <div className="flex items-center gap-1 flex-wrap">
    {STEPS.map((step, idx) => {
      const isActive = step.id === currentStep;
      const isCompleted = step.id < currentStep;
      const hasError = errors.includes(step.id);

      return (
        <div key={step.id} className="flex items-center">
          <div className="flex items-center gap-1.5">
            <div
              className={cn(
                "w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold transition-all",
                isActive && "bg-slate-800 text-white",
                isCompleted && !hasError && "bg-emerald-500 text-white",
                hasError && "bg-destructive text-destructive-foreground",
                !isActive && !isCompleted && !hasError &&
                  "bg-muted text-muted-foreground border border-border"
              )}
            >
              {hasError ? "!" : isCompleted && !hasError ? "✓" : step.id}
            </div>
            <span className={cn("text-xs font-medium", isActive ? "text-foreground" : "text-muted-foreground")}>
              {step.label}
            </span>
          </div>
          {idx < STEPS.length - 1 && (
            <div className={cn("h-px w-6 mx-1", isCompleted && !hasError ? "bg-emerald-400" : "bg-border")} />
          )}
        </div>
      );
    })}
  </div>
);

export default StepIndicator;