/**
 * @description 搜索
 *
 * @date 创建时间 2022-10-18 13:56
 * @author 开发人员
 */

import React from "react"
import Input, { InputProps } from "@components/Input"
import { SearchIcon } from "@icons/SearchIcon"
import { ClearIcon } from "@icons/ClearIcon"

const SearchInput: React.FC<InputProps & { onClear: () => void }> = props => {
  return (
    <Input
      {...props}
      variant="outlined"
      placeholder="搜索"
      textAlign="left"
      className="h-[36px] px-[12px]"
      startAdornment={<SearchIcon />}
      endAdornment={
        props.value ? (
          <button className="outline-none bg-transparent text-inherit" onClick={props.onClear}>
            <ClearIcon />
          </button>
        ) : undefined
      }
    />
  )
}

export default SearchInput