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

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

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

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