import { useState } from 'react'
import { SearchSVG } from '../SVGs/CommonSVG';
import { useTranslation } from '@/Utils/Hooks/useTranslate';

const SearchInput = (props) => {
    const { translations } = useTranslation();
    const { inputProps, customClass, setSearch, customInputMainClass, setParams, onFocus, onBlur } = props;
    const [tc, setTc] = useState<NodeJS.Timeout | null>(null);

    const onChange = (text: any) => {
        if (tc) clearTimeout(tc);
        setTc(setTimeout(() => {
            setSearch && setSearch(text);
            setParams && setParams((prev) => ({ ...prev, page: 1 }))
        }, 600));
    };

    return (
        <div className={`${customInputMainClass} relative group`}>
            <div className="absolute start-4 inset-y-0 flex items-center pointer-events-none z-20 text-neutral-400 group-focus-within:text-primary transition-colors">
                <SearchSVG />
            </div>
            <input
                {...inputProps}
                onChange={(e) => onChange(e.target.value)}
                onFocus={onFocus}
                onBlur={onBlur}
                className={`${customClass} pl-11 w-full bg-neutral-100/70 hover:bg-neutral-100 focus:bg-white border border-lightGray focus:border-primary/40 focus:ring-4 focus:ring-primary/15 focus:outline-none placeholder:text-neutral-400 py-3 px-4 text-sm rounded-full transition-all duration-150`}
                placeholder={`${translations?.search}...`}
                disabled={setSearch === false}
            />
        </div>
    )
}

export default SearchInput