import { Input, View, Image } from "@tarojs/components";
import style from "./index.module.less";
import IconClear from "@/images/icon-clear.png";
import IconSearch from "@/images/icon_search_16.png";
interface Props {
  value: string;
  onChange: (newValue: string) => void;
  onClear: () => void;
  onBlur: () => void;
  onFocus: () => void;
}
export default function Index({
  value,
  onChange,
  onClear,
  onBlur,
  onFocus,
}: Props) {
  const handleClear = () => {
    onClear();
  };
  return (
    <View className={style.searchBarContainer}>
      <Image src={IconSearch} className={style.searchBarIcon}></Image>
      <Input
        value={value}
        onInput={(e: any) => onChange(e.target.value)}
        onBlur={onBlur}
        onFocus={onFocus}
        placeholderTextColor="#A1A7BA"
        type="text"
        placeholder="搜索智能体"
        className={style.searchBarInput}
      />
      {/* {value && <View className={`iconfont icon-a-icon_24_edit1  ${style.searchBarClearButton}`} onClick={handleClear}></View>} */}
      {value && (
        <Image
          src={IconClear}
          className={`${style.searchBarClearButton}`}
          onClick={handleClear}
        ></Image>
      )}
    </View>
  );
}
