interface StateInputProps<T> {
    state: PrimitiveAtom<T>;
    className?: string;
}

const NumberStateInput: FC<StateInputProps<number | null>> = (
    props: StateInputProps<number | null>
) => {
    const { state, className } = props;
    const [number, setNumber] = useAtom(state);

    const handleChange = useCallback(
        (e: ChangeEvent<HTMLInputElement>) => {
            const re = /^\d*$/;
            const v = e.target.value;
            if (v === '') {
                setNumber(null);
            } else if (re.test(v)) {
                setNumber(parseInt(v));
            }
        },
        [setNumber]
    );

    return (
        <input
            className={className}
            value={number ?? ''}
            onChange={handleChange}
        />
    );
};