import {Search} from '@nutui/icons-react-taro'
import {Button, Input} from '@nutui/nutui-react-taro'
import {useState} from "react";
import Taro from '@tarojs/taro';
function MySearch(props) {
  const [keywords, setKeywords] = useState<string>('')

  const onKeywords = (keywords: string) => {
    setKeywords(keywords)
  }

  const onQuery = () => {
    if(!keywords){
      Taro.showToast({
        title: '请输入关键字',
        icon: 'none'
      });
      return false;
    }
    props.done(keywords);
  }


  return (
    <div className={'z-50 left-0 w-full'}>
      <div className={'px-2'}>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            background: '#ffffff',
            padding: '0 7px',
            borderRadius: '20px',
            marginTop: '100px',
          }}
        >
          <Search size={18} className={'ml-2 text-gray-400'}/>
          <Input
            placeholder="搜索商品"
            value={keywords}
            onChange={onKeywords}
            onConfirm={onQuery}
            style={{ padding: '9px 8px'}}
          />
          <div
            className={'flex items-center'}
          >
            <Button type="success" style={{background: 'linear-gradient(to bottom, #1cd98a, #24ca94)'}} onClick={onQuery}>
              搜索
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MySearch;