import * as React from "react";
import { ResetIcon, SearchInput, SearchContainer } from "./style";
/* 
TODO: these props should be required
same comment as the Hierarchy list component
*/
export interface SearchProps {
    value: string;
    onChange: (value: string) => void;
    onReset?: () => void;
    id?: string;
    name?: string;
}

const Search = (props: SearchProps) => {
    return (
        <>
            <ResetIcon className="icon-reset" onClick={props.onReset} id={props.id && props.id + '-list-picker-search-reset-icon'} />
            <SearchContainer className={"search-container"} id={props.id && props.id + '-list-picker-search-container-div'} >
                <SearchInput
                    placeholder={"Search"}
                    value={props.value}
                    onChange={({ target: { value } }) =>
                        props.onChange && props.onChange(value)
                    }
                    id={props.id && props.id + '-list-picker-search-input'}
                    name={props.name && props.name + '-list-picker-search-input'}
                />
            </SearchContainer>
        </>
    );
};

export default Search;