import React from 'react';

function SearchBar({ value, onChange, onClickSearch, placeholder }) {
  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}
          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-600 flex items-center justify-center px-4 py-2 w-20'
          onClick={onClickSearch}>
          <span className='text-white font-medium'>搜索</span>
        </button>
      </div>
      <button
        className='ml-2 rounded border bg-white hover:bg-gray-100  flex items-center justify-center px-4 py-2 w-18'
        onClick={onClickSearch}>
        <span className='text-gray-500 font-medium'>刷新</span>
      </button>
    </div>
  );
}

export default SearchBar;
