'use client'

import { STEP_KEYS, STEP_LABEL_DE, type StepKey } from '@/lib/oee/analysis'

type Props = {
  current: StepKey
  onSelect: (key: StepKey) => void
  disabledAfter?: StepKey | null
}

export default function StepperNav({ current, onSelect, disabledAfter }: Props) {
  const disabledIdx = disabledAfter ? STEP_KEYS.indexOf(disabledAfter) : STEP_KEYS.length - 1

  return (
    <nav aria-label="Schritte" className="flex flex-wrap items-center gap-1">
      {STEP_KEYS.map((key, idx) => {
        const isActive = key === current
        const isDisabled = idx > disabledIdx + 1
        return (
          <button
            key={key}
            type="button"
            disabled={isDisabled}
            onClick={() => !isDisabled && onSelect(key)}
            className={[
              'px-3 py-1.5 text-xs font-condensed font-bold rounded-sm border',
              isActive
                ? 'bg-primary text-white border-primary'
                : isDisabled
                ? 'border-border text-muted-foreground/60 cursor-not-allowed'
                : 'border-border text-foreground hover:bg-muted',
            ].join(' ')}
          >
            <span className="opacity-70 mr-1">{idx + 1}.</span>
            {STEP_LABEL_DE[key]}
          </button>
        )
      })}
    </nav>
  )
}