import React from 'react';

function SearchBarWithTwoTab({
  selectedOption,
  handleChangeSubsetTab,
  searchInput,
  handleSearchChange,
  handleSearch,
}) {
  return (
    <div className='flex items-center justify-center'>
      <div className='search-bar rounded overflow-hidden flex items-center border'>
        <div className='bg-white flex items-center'>
          <select
            id='my-select'
            className='search-bar-select bg-white h-9 px-3 focus:outline-none'
            value={selectedOption}
            onChange={handleChangeSubsetTab}>
            <option value='course'>课程</option>
            <option value='album'>专辑</option>
          </select>
          <div className='border-r h-6 mx-2'></div>
          <input
            type='text'
            placeholder={selectedOption === 'course' ? '搜索课程' : '搜索专辑'}
            value={searchInput}
            onChange={handleSearchChange}
            className='px-2 py-1 mr-2 flex-grow md:min-w-[300px] md:flex-grow-0 bg-transparent  focus:outline-none w-full'
          />
        </div>
      </div>
      <button
        className='h-9 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-3 ml-2 rounded w-20'
        onClick={handleSearch}>
        <span className='text-white font-medium'>搜索</span>
      </button>
      <button
        className='h-9 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-3 ml-2 rounded w-20'
        onClick={handleSearch}>
        <span className='text-white font-medium'>刷新</span>
      </button>
    </div>
  );
}

export default SearchBarWithTwoTab;
