import React, { useRef, useCallback } from 'react';

export default function LetterInput({ highlighted, onNext, onPrev, inputRef }) {
    const handleKeyUp = useCallback((e) => {
        if (e.key === 'Backspace') {
            e.target.value = '';
            onPrev?.();
        } else if (e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
            e.target.value = e.key.toUpperCase();
            onNext?.();
        }
    }, [onNext, onPrev]);

    return (
        <td>
            <input
                ref={inputRef}
                type="text"
                maxLength={1}
                className={`letter-input${highlighted ? ' letter-highlighted' : ''}`}
                onKeyUp={handleKeyUp}
                autoComplete="off"
            />
        </td>
    );
}