interface ProgressStepperProps {
  currentStep: number
  totalSteps: number
  stepLabel: string
}

export function ProgressStepper({ currentStep, totalSteps, stepLabel }: ProgressStepperProps) {
  const progress = (currentStep / totalSteps) * 100

  return (
    <div className="flex flex-col items-center gap-4 mb-12">
      <div className="text-sm font-medium text-muted-foreground">
        Step {currentStep} of {totalSteps}
      </div>

      <div className="w-full max-w-md">
        <div className="flex justify-between text-xs text-muted-foreground mb-2">
          <span>Select Service</span>
          <span>Complete</span>
        </div>
        <div className="h-2 bg-card border border-border rounded-full overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-primary to-primary-glow transition-all duration-500"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      <div className="text-lg font-semibold text-foreground">{stepLabel}</div>
    </div>
  )
}