'use client'

const STEPS = [
  { id: 1, label: 'Analyse Sheets' },
  { id: 2, label: 'Aperçu diff' },
  { id: 3, label: 'Confirmation' },
  { id: 4, label: 'Synchronisation' },
]

interface SyncStepperProps {
  currentStep: number  // 1–4
}

export function SyncStepper({ currentStep }: SyncStepperProps) {
  return (
    <div className="flex items-center gap-0">
      {STEPS.map((step, i) => {
        const done = currentStep > step.id
        const active = currentStep === step.id
        return (
          <div key={step.id} className="flex items-center">
            {i > 0 && (
              <div className={`h-0.5 w-12 ${done ? 'bg-indigo-500' : 'bg-slate-700'}`} />
            )}
            <div className="flex flex-col items-center gap-1">
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
                  done
                    ? 'bg-indigo-500 text-white'
                    : active
                      ? 'bg-indigo-600 text-white ring-2 ring-indigo-400'
                      : 'bg-slate-800 text-slate-500 border border-slate-700'
                }`}
              >
                {done ? '✓' : step.id}
              </div>
              <span className={`text-xs ${active ? 'text-slate-200 font-semibold' : 'text-slate-500'}`}>
                {step.label}
              </span>
            </div>
          </div>
        )
      })}
    </div>
  )
}