import { jsx as _jsx } from "react/jsx-runtime";
import { Input } from "../../../input";
import { InputMask } from "../../../input/inputMask";
import { Search } from "lucide-react";
import { useCallback } from "react";
export const SearchForm = (props)=>{
    // const [key, setKey] = useState<string>("");
    const onClean = useCallback(()=>{
        //
        props.onChange?.("");
    }, []);
    // useEffect(() => {
    //   props.onChange?.(key);
    // }, [key]);
    return /*#__PURE__*/ _jsx(Input, {
        fullWidth: true,
        placeholder: "Search instrument",
        onClean: onClean,
        value: props.value,
        containerClassName: "orderly-markets-search orderly-bg-base-900",
        className: "orderly-markets-search-input orderly-text-2xs",
        onChange: (event)=>{
            props.onChange?.(event.target.value);
        },
        prefix: /*#__PURE__*/ _jsx(InputMask, {
            children: /*#__PURE__*/ _jsx(Search, {
                size: 16,
                className: "orderly-markets-search-icon orderly-text-base-contrast-20"
            })
        })
    });
};

//# sourceMappingURL=search.js.map