ERitors-Scribe-Desktop/components/form/NumberInput.tsx

import React, {ChangeEvent, Dispatch} from "react";

interface NumberInputProps {
    value: number | null;
    setValue?: Dispatch<React.SetStateAction<number>>;
    onValueChange?: (value: number | null) => void;
    placeholder?: string;
    readOnly?: boolean;
    disabled?: boolean;
}

export default function NumberInput(
    {
        value,
        setValue,
        onValueChange,
        placeholder,
        readOnly = false,
        disabled = false
    }: NumberInputProps
) {
    function handleChange(e: ChangeEvent<HTMLInputElement>): void {
        const inputValue: string = e.target.value;
        if (inputValue === '') {
            if (onValueChange) {
                onValueChange(null);
            }
            return;
        }
        const newValue: number = parseInt(inputValue, 10);
        if (!isNaN(newValue)) {
            if (onValueChange) {
                onValueChange(newValue);
            } else if (setValue) {
                setValue(newValue);
            }
        }
    }

    return (
        <input
            type="number"
            value={value ?? ''}
            onChange={handleChange}
            className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
                hover:bg-secondary hover:border-secondary
                placeholder:text-muted/60
                outline-none transition-all duration-200
                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                ${readOnly ? 'cursor-default' : ''}`}
            placeholder={placeholder}
            readOnly={readOnly}
            disabled={disabled}
        />
    )
}