import { StepInfo, WizardStep } from './types'

export function WizardStepper({ steps, currentStep, onStepClick }: {
  steps: StepInfo[]
  currentStep: WizardStep
  onStepClick: (step: WizardStep) => void
}) {
  const currentIndex = steps.findIndex(s => s.id === currentStep)

  return (
    <div className="flex items-center gap-1 overflow-x-auto pb-2">
      {steps.map((step, index) => {
        const isActive = step.id === currentStep
        const isCompleted = index < currentIndex
        const isClickable = index <= currentIndex + 1

        return (
          <button
            key={step.id}
            onClick={() => isClickable && onStepClick(step.id)}
            disabled={!isClickable}
            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
              isActive
                ? 'bg-indigo-600 text-white'
                : isCompleted
                ? 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
                : isClickable
                ? 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                : 'bg-gray-50 text-gray-400 cursor-not-allowed'
            }`}
          >
            <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${
              isActive ? 'bg-white/20' : isCompleted ? 'bg-indigo-200' : 'bg-gray-200'
            }`}>
              {isCompleted ? '✓' : index + 1}
            </span>
            <span className="hidden md:inline">{step.title}</span>
          </button>
        )
      })}
    </div>
  )
}
