import { CheckCircle2 } from 'lucide-react'

interface StepIndicatorProps {
  step: number      // current step (1-based)
  total: number
  labels: string[]
}

export default function StepIndicator({ step, total, labels }: StepIndicatorProps) {
  return (
    <>
      {/* Mobile: simple text */}
      <div className="md:hidden flex items-center justify-center py-3">
        <span className="text-sm font-medium text-content-secondary">
          Step {step} of {total}
          {labels[step - 1] ? ` — ${labels[step - 1]}` : ''}
        </span>
      </div>

      {/* Desktop: full step bar */}
      <div className="hidden md:flex items-center w-full mb-6">
        {Array.from({ length: total }, (_, i) => {
          const num = i + 1
          const isCompleted = num < step
          const isActive = num === step
          const isFuture = num > step

          return (
            <div key={num} className="flex items-center flex-1 last:flex-none">
              {/* Step circle + label */}
              <div className="flex flex-col items-center gap-1">
                <div
                  className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ${
                    isCompleted
                      ? 'bg-accent text-accent-text'
                      : isActive
                        ? 'bg-accent text-accent-text ring-4 ring-accent-light'
                        : 'bg-surface-muted text-content-muted border border-border-default'
                  }`}
                >
                  {isCompleted ? <CheckCircle2 size={16} /> : num}
                </div>
                <span
                  className={`text-xs font-medium whitespace-nowrap ${
                    isActive ? 'text-accent' : isFuture ? 'text-content-muted' : 'text-content-secondary'
                  }`}
                >
                  {labels[i] ?? `Step ${num}`}
                </span>
              </div>

              {/* Connector line (not after last step) */}
              {num < total && (
                <div
                  className={`flex-1 h-0.5 mx-2 mt-[-16px] transition-colors ${
                    isCompleted ? 'bg-accent' : 'bg-border-default'
                  }`}
                />
              )}
            </div>
          )
        })}
      </div>
    </>
  )
}