import { WizardStep } from './types'

export function WizardStepper({
  steps,
  currentStep,
  onStepClick
}: {
  steps: WizardStep[]
  currentStep: number
  onStepClick: (index: number) => void
}) {
  return (
    <div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
      {steps.map((step, index) => (
        <div key={step.id} className="flex items-center">
          <button
            onClick={() => onStepClick(index)}
            className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
              index === currentStep
                ? 'bg-blue-100 text-blue-700'
                : step.status === 'completed'
                ? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
                : step.status === 'failed'
                ? 'bg-red-100 text-red-700 cursor-pointer hover:bg-red-200'
                : 'text-gray-400'
            }`}
            disabled={index > currentStep && steps[index - 1]?.status === 'pending'}
          >
            <span className="text-2xl mb-1">{step.icon}</span>
            <span className="text-xs font-medium text-center">{step.name}</span>
            {step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
            {step.status === 'failed' && <span className="text-xs text-red-600">✗</span>}
          </button>
          {index < steps.length - 1 && (
            <div className={`h-0.5 w-8 mx-1 ${
              index < currentStep ? 'bg-green-400' : 'bg-gray-200'
            }`} />
          )}
        </div>
      ))}
    </div>
  )
}