import { TextField } from "@mui/material";
import { ChangeEvent, FC } from "react";

import { applyFilter } from "../../lib";
import { IProps } from "../../model";

export const NumberInput: FC<IProps> = ({ label, setValue, value }) => {
	function onChange(event: ChangeEvent<HTMLInputElement>) {
		const newValue = { ...value, 1: event.target.value };
		setValue(newValue);
		applyFilter(newValue);
	}

	return (
		<TextField
			label={label}
			value={value[1]}
			type={"number"}
			onChange={onChange}
			size={"small"}
			autoComplete={"off"}
		/>
	);
};