import { Input, InputProps } from "antd";
import { FC } from "react";
import Icon from "@ant-design/icons";
import { ReactComponent as searchIcon } from "@/assets/icons/icon_search.svg";
import { ReactComponent as resetIcon } from "@/assets/icons/icon_reset.svg";
import styl from "./index.module.scss";

export interface SearchProps extends Omit<InputProps, "size" | "borderless"> {
  onSearch?: () => void;
  onReset?: () => void;
}

export const Search: FC<SearchProps> = ({
  style,
  onSearch,
  onReset,
  ...rest
}) => {
  return (
    <div className={styl.search} style={style}>
      <Input {...rest} size="small" variant="borderless" allowClear />

      <div className={styl.toolbar}>
        {Boolean(onSearch) && (
          <Icon
            component={searchIcon}
            style={{ color: "#4284FF" }}
            onClick={() => onSearch?.()}
          />
        )}
        {Boolean(onReset) && (
          <Icon
            component={resetIcon}
            style={{ color: "#494949" }}
            onClick={() => onReset?.()}
          />
        )}
      </div>
    </div>
  );
};
