'use client'

import React from 'react'
import { WIZARD_STEPS } from '../_data'

interface Props {
  currentStep: number
  onStepClick: (id: number) => void
}

export function StepIndicator({ currentStep, onStepClick }: Props) {
  return (
    <div className="flex items-center gap-2">
      {WIZARD_STEPS.map((step, idx) => (
        <React.Fragment key={step.id}>
          <button
            onClick={() => onStepClick(step.id)}
            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
              currentStep === step.id
                ? 'bg-purple-600 text-white'
                : currentStep > step.id
                ? 'bg-green-100 text-green-700'
                : 'bg-gray-100 text-gray-500'
            }`}
          >
            <span className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-bold">
              {currentStep > step.id ? '✓' : step.id}
            </span>
            <span className="hidden md:inline">{step.title}</span>
          </button>
          {idx < WIZARD_STEPS.length - 1 && <div className="flex-1 h-px bg-gray-200" />}
        </React.Fragment>
      ))}
    </div>
  )
}
