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]) }