import React from 'react';
import { useTranslation } from 'react-i18next';

function SearchBar({
  value,
  onChange,
  onClickSearch,
  onClickRefresh,
  placeholder,
}) {
  const { t, i18n } = useTranslation();

  /// 回车键搜索
  function onKeyDown(event) {
    if (event.keyCode === 13) {
      onClickSearch();
    }
  }

  return (
    <div className='flex items-center justify-center '>
      <div className='search-bar rounded overflow-hidden flex items-center border '>
        <input
          type='text'
          placeholder={placeholder}
          value={value}
          onChange={onChange}
          onKeyDown={onKeyDown}
          className='px-2 py-1 mr-2 flex-grow md:min-w-[300px] md:flex-grow-0 bg-transparent focus:outline-none w-full'
        />
        <button
          className='rounded-r border-blue bg-blue-500 hover:bg-blue-400 flex items-center justify-center px-0 py-2 w-20'
          onClick={onClickSearch}>
          <span className='text-white font-medium min-w-16'>{t('搜索')}</span>
        </button>
      </div>
      <button
        className='ml-2 rounded border-blue bg-blue-500 hover:bg-blue-400  flex items-center justify-center px-3 py-2 w-16'
        onClick={onClickRefresh}>
        <span className='text-white font-medium min-w-16'>{t('刷新')}</span>
      </button>
    </div>
  );
}

export default SearchBar;
