"use client";

import { cn } from "@/shared/utils";

interface ProgressIndicatorProps {
  /** Current step (0-indexed) */
  currentStep: number;
  /** Total number of steps */
  totalSteps: number;
}

/**
 * Progress step indicator showing completed, current, and remaining steps.
 * Steps are rendered as horizontal bars with different states.
 */
export function ProgressIndicator({ currentStep, totalSteps }: ProgressIndicatorProps) {
  return (
    <div className="flex items-center gap-1.5 mb-6">
      {Array.from({ length: totalSteps }).map((_, i) => (
        <div
          key={i}
          className={cn(
            "h-1 rounded-full transition-all duration-500",
            i < currentStep
              ? "bg-primary flex-[2]"
              : i === currentStep
                ? "bg-primary/40 flex-[2] animate-pulse"
                : "bg-border flex-1"
          )}
        />
      ))}
    </div>
  );
}
