import { useMemo } from 'react';
import debounce from 'lodash.debounce';

import TextField from '@mui/material/TextField';
// ----------------------------------------------------------------------

type TextFilterProps = {
    label: string;
    onChange?: (value: string) => void;
}

export function TextFilter({ label, onChange }: TextFilterProps) {
    const debouncedChange = useMemo(() =>
        debounce((value: string) => {
            onChange?.(value);
        }, 1000)
        , [onChange]);

    return <TextField label={label} variant="filled" onChange={e => debouncedChange(e.target.value)} />;
}