import { TextInput, type TextInputProps } from '@mantine/core';
import { useEffect } from 'react';

export function DebouncedInput({
	value,
	onChange,
	debounce = 500,
	...props
}: {
	value: string | number;
	onChange: (value: string | number) => void;
	debounce?: number;
} & Omit<TextInputProps, 'onChange'>) {
	useEffect(() => {
		const timeout = setTimeout(() => {
			onChange(value);
		}, debounce);

		return () => clearTimeout(timeout);
	}, [value]);

	return (
		<TextInput
			{...props}
			value={value}
			onClick={(e) => e.stopPropagation()}
			onChange={(e) => onChange(e.target.value)}
		/>
	);
}