'use client';

/**
 * Step Indicator Component
 *
 * Shows progress through the wizard steps with visual feedback.
 * Dynamically adjusts based on whether script mode is active.
 */

import { cn } from '@/lib/utils';
import { getStepLabels, getDisplayStep, getTotalSteps } from './constants';

interface StepIndicatorProps {
  currentStep: number;
  isScriptMode: boolean;
  className?: string;
}

export function StepIndicator({ currentStep, isScriptMode, className }: StepIndicatorProps) {
  const steps = getStepLabels(isScriptMode);
  const totalSteps = getTotalSteps(isScriptMode);
  const displayStep = getDisplayStep(currentStep, isScriptMode);

  return (
    <div className={cn('w-full', className)}>
      <div className="mb-2 flex items-center justify-between text-sm text-muted-foreground">
        <span>
          Step {displayStep} of {totalSteps}
        </span>
        <span>{steps[displayStep - 1]}</span>
      </div>
      <div
        className="flex gap-1"
        role="progressbar"
        aria-valuenow={displayStep}
        aria-valuemax={totalSteps}
      >
        {Array.from({ length: totalSteps }, (_, i) => (
          <div
            key={i}
            className={cn(
              'h-2 flex-1 rounded-full transition-colors',
              i + 1 < displayStep
                ? 'bg-primary'
                : i + 1 === displayStep
                  ? 'bg-primary/70'
                  : 'bg-muted'
            )}
            aria-hidden="true"
          />
        ))}
      </div>
    </div>
  );
}