import React, { useCallback } from 'react';

export default function LetterInput({ highlighted, onNext, onPrev, inputRef, value, rowIndex, charIndex, revealState = null, disabled = false }) {
    const handleKeyUp = useCallback((e) => {
        if (disabled || value !== undefined) {
            return;
        }

        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?.();
        }
    }, [disabled, onNext, onPrev, value]);

    return (
        <td>
            <input
                ref={inputRef}
                type="text"
                maxLength={1}
                className={`letter-input${highlighted ? ' letter-highlighted' : ''}${revealState ? ` letter-${revealState}` : ''}`}
                value={value}
                disabled={disabled}
                readOnly={value !== undefined}
                onKeyUp={handleKeyUp}
                data-row-index={rowIndex}
                data-char-index={charIndex}
                autoComplete="off"
            />
        </td>
    );
}