import classNames from "classnames";
import style from "./SearchText.module.css";
import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";

export type SearchTextWidth = "80%" | "100%";

export interface SearchTextProps {
    value: string;
    placeHolder: string;
    actionText: string;
    width?: SearchTextWidth;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onClick: (e: React.MouseEvent<HTMLInputElement>) => void;
}
export default function SearchText(props: SearchTextProps): React.ReactElement {
    const { width = "80%" } = props;
    /* eslint-disable @typescript-eslint/no-explicit-any */
    const getWidth = (base: any) => {
        if (width === "100%") {
            return classNames(base, style.searchTextWidth100);
        } else if (width === "80%") {
            return classNames(base, style.searchTextWidth80);
        }
        return classNames(base, style.searchTextWidth80);
    };

    return (
        <>
            <div className={getWidth(style.searchText)}>
                <SearchOutlinedIcon />
                <input
                    type="text"
                    value={props.value}
                    onChange={props.onChange}
                    placeholder={props.placeHolder}
                />
                <input
                    className={style.searchTextButton}
                    type="button"
                    value={props.actionText}
                    onClick={props.onClick}
                />
            </div>
        </>
    );
}
