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

const GESTURE_LABELS: Record<string, string> = {
  '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

  return (
    <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' && 'Place hand on opposite shoulder to start'}
      {calibrationStatus === 'paused' && (framingHint
        ? `Paused — ${framingHint}`
        : 'Paused — place hand on opposite shoulder to resume')}
    </div>
  )
}
