import { Search } from '@taroify/core';
import classNames from 'classnames';
import { ReactNode } from 'react';

import { isIPhone } from '@/utils/common';

import './index.less';

type SearchProps = Parameters<typeof Search>[0];

interface ISearchProps extends SearchProps {
  onClickSearch?: () => void;
  searchAction?: ReactNode;
}

const PREFIX = 'search-input';

function SearchInput(props: ISearchProps) {
  const { className, searchAction, onClickSearch, ...otherProps } = props;

  const action = searchAction ? (
    typeof searchAction === 'string' ? (
      <div className={`${PREFIX}__custom-action`} onClick={onClickSearch}>
        {searchAction}
      </div>
    ) : (
      searchAction
    )
  ) : (
    false
  );

  return (
    <Search
      className={classNames(PREFIX, className, { ios: isIPhone })}
      shape="rounded"
      action={action}
      {...otherProps}
    />
  );
}

export default SearchInput;
