src/hooks/useKeyboard.ts

import { useEffect } from 'react'

interface KeyboardHandlers {
  onArrowUp?: () => void
  onArrowDown?: () => void
  onArrowLeft?: () => void
  onArrowRight?: () => void
  onEnter?: () => void
  onEscape?: () => void
  onBackspace?: () => void
}

export function useKeyboard(handlers: KeyboardHandlers, enabled: boolean = true) {
  useEffect(() => {
    if (!enabled) return

    const handleKeyDown = (event: KeyboardEvent) => {
      switch (event.key) {
        case 'ArrowUp':
          event.preventDefault()
          handlers.onArrowUp?.()
          break
        case 'ArrowDown':
          event.preventDefault()
          handlers.onArrowDown?.()
          break
        case 'ArrowLeft':
          event.preventDefault()
          handlers.onArrowLeft?.()
          break
        case 'ArrowRight':
          event.preventDefault()
          handlers.onArrowRight?.()
          break
        case 'Enter':
          event.preventDefault()
          handlers.onEnter?.()
          break
        case 'Escape':
          event.preventDefault()
          handlers.onEscape?.()
          break
        case 'Backspace':
          event.preventDefault()
          handlers.onBackspace?.()
          break
      }
    }

    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [handlers, enabled])
}