src/components/ProcessStepper.tsx

// Step indicator for multi-stage approval flows

interface Step {
  label: string;
  done: boolean;
  active?: boolean;
}

interface ProcessStepperProps {
  steps: Step[];
  className?: string;
}

export default function ProcessStepper({ steps, className = '' }: ProcessStepperProps) {
  return (
    <div className={`flex items-center gap-1 ${className}`}>
      {steps.map((step, i) => (
        <div key={step.label} className="flex items-center gap-1">
          {i > 0 && (
            <div
              className={`w-4 h-px ${step.done || step.active ? 'bg-ink-black' : 'bg-border-default'}`}
            />
          )}
          <div className="flex items-center gap-1">
            <div
              className={[
                'w-4 h-4 flex items-center justify-center text-[8px] font-bold border rounded-full',
                step.done
                  ? 'bg-accent-teal text-white border-accent-teal'
                  : step.active
                    ? 'bg-paper-white text-accent-teal border-accent-teal'
                    : 'bg-paper-white text-ink-light border-border-default',
              ].join(' ')}
            >
              {step.done ? '✓' : i + 1}
            </div>
            <span
              className={`text-[10px] ${
                step.done || step.active ? 'text-ink-black font-semibold' : 'text-ink-light'
              }`}
            >
              {step.label}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}