import type { GestureSignal, CalibrationStatus } from '../gesture/types'

const GESTURE_LABELS: Record<string, string> = {
  'arms-out': 'ARMS OUT',
  'step-left': 'STEP LEFT',
  'step-right': 'STEP RIGHT',
  'step-forward': 'STEP FORWARD',
  'step-back': 'STEP BACK',
}

interface Props {
  gesture: GestureSignal
  calibrationStatus: CalibrationStatus
  framingHint: string | null
}

export function GestureOverlay({ gesture, calibrationStatus, framingHint }: Props) {
  if (calibrationStatus === 'ready') return null

  const showGesture = gesture === 'arms-out'

  return (
    <>
      {showGesture && (
        <div className="gesture-label">
          {GESTURE_LABELS[gesture]}
        </div>
      )}
      <div className="debug-status">
        {calibrationStatus === 'framing' && 'I cannot see your feet — step back!'}
        {calibrationStatus === 'waiting' && 'Hold still...'}
        {calibrationStatus === 'calibrating' && 'Calibrating — hold still...'}
        {calibrationStatus === 'pos-center' && 'Raise arms to start'}
        {calibrationStatus === 'paused' && (framingHint
          ? `Paused — ${framingHint}`
          : 'Paused — raise arms to continue')}
      </div>
    </>
  )
}
