import { STEP_LABELS } from '../DeidentifyPanel';

export function StepIndicator({ current }: { current: number }) {
  return (
    <div className="flex items-center justify-center gap-0 px-6 py-4 border-b border-stroke">
      {STEP_LABELS.map((label, i) => {
        const stepNum = i + 1;
        const isDone = stepNum < current;
        const isActive = stepNum === current;
        return (
          <div key={label} className="flex items-center">
            <div className="flex flex-col items-center">
              <div
                className={`w-7 h-7 rounded-full flex items-center justify-center text-caption font-semibold transition-colors ${
                  isDone
                    ? 'bg-color-success text-white'
                    : isActive
                      ? 'bg-color-accent text-white'
                      : 'bg-bg-elevated text-t3'
                }`}
              >
                {isDone ? (
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2.5}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                ) : (
                  stepNum
                )}
              </div>
              <span
                className={`mt-1 text-label-2 whitespace-nowrap ${
                  isActive ? 'text-color-accent' : isDone ? 'text-color-success' : 'text-t3'
                }`}
              >
                {stepNum}.{label}
              </span>
            </div>
            {i < STEP_LABELS.length - 1 && (
              <div
                className={`w-10 h-px mx-1 mb-4 ${i + 1 < current ? 'bg-color-success' : 'bg-stroke-1'}`}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}
