'use client'

const STEPS = [
  { id: 'draft', label: 'Entwurf' },
  { id: 'scoped', label: 'Intake' },
  { id: 'classified', label: 'Klassifiziert' },
  { id: 'path_selected', label: 'Pfad' },
  { id: 'requirements_mapped', label: 'Requirements' },
  { id: 'evidence_pending', label: 'Evidence' },
  { id: 'ready_for_review', label: 'Review' },
  { id: 'declaration_ready', label: 'DoC' },
  { id: 'post_market', label: 'Post-Market' },
]

export function StatusStepper({ current }: { current: string }) {
  const currentIdx = STEPS.findIndex(s => s.id === current)
  return (
    <div className="flex items-center gap-1 overflow-x-auto py-2">
      {STEPS.map((step, idx) => {
        const isPast = idx < currentIdx
        const isCurrent = idx === currentIdx
        return (
          <div key={step.id} className="flex items-center gap-1 flex-shrink-0">
            <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium ${
              isCurrent ? 'bg-blue-600 text-white' :
              isPast ? 'bg-green-500 text-white' :
              'bg-gray-200 text-gray-500'
            }`}>{idx + 1}</div>
            <span className={`text-xs ${isCurrent ? 'font-semibold text-blue-700' : isPast ? 'text-gray-700' : 'text-gray-400'}`}>
              {step.label}
            </span>
            {idx < STEPS.length - 1 && (
              <span className={`mx-1 ${isPast ? 'text-green-500' : 'text-gray-300'}`}>→</span>
            )}
          </div>
        )
      })}
    </div>
  )
}