import React, { CSSProperties, Ref } from 'react';
import { Input } from 'antd';
import type { InputProps, InputRef } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './index.less';

const prefixCls = 'qx-search-input';

type QxSearchInputProps = {
  // searchInputRef.current 获取当前input Dom 元素 自动聚焦
  searchInputRef?: Ref<InputRef>;
  // 自定义样式 style
  style?: CSSProperties;
  // 轻提示
  placeholder?: string;
  // 支持 antd-Input 自身API
} & InputProps;

export const QxSearchInput: React.FC<QxSearchInputProps> = (props) => {
  const defaultPrefixIcon: React.ReactNode = <SearchOutlined />;

  return (
    <Input
      ref={props.searchInputRef}
      className={prefixCls}
      placeholder={props?.placeholder || '请输入搜索内容'}
      prefix={props?.prefix || defaultPrefixIcon}
      {...props}
    />
  );
};