effigenix/frontend/apps/scanner/src/components/StepIndicator.tsx

import { Check } from 'lucide-react';
import { cn } from '@effigenix/ui';

export interface Step {
  label: string;
  state: 'done' | 'active' | 'pending';
}

interface StepIndicatorProps {
  steps: Step[];
}

export function StepIndicator({ steps }: StepIndicatorProps) {
  return (
    <div className="px-8 mb-2">
      <div className="flex items-center gap-0 mb-1">
        {steps.map((step, i) => (
          <div key={i} className="contents">
            <div
              className={cn(
                'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all',
                step.state === 'done' && 'bg-success-100 text-success-700',
                step.state === 'active' && 'bg-brand-600 text-white shadow-brand',
                step.state === 'pending' && 'bg-warm-200 text-warm-500'
              )}
            >
              {step.state === 'done' ? <Check className="w-3.5 h-3.5" /> : i + 1}
            </div>
            {i < steps.length - 1 && (
              <div
                className={cn(
                  'flex-1 h-0.5 transition-colors',
                  step.state === 'done' ? 'bg-success-300' : 'bg-warm-200'
                )}
              />
            )}
          </div>
        ))}
      </div>
      <div className="flex justify-between text-2xs font-semibold uppercase px-0.5">
        {steps.map((step, i) => (
          <span
            key={i}
            className={cn(
              step.state === 'done' && 'text-success-600',
              step.state === 'active' && 'text-brand-600',
              step.state === 'pending' && 'text-warm-500'
            )}
          >
            {step.label}
          </span>
        ))}
      </div>
    </div>
  );
}