import PropTypes from 'prop-types';
import { SearchIcon } from '@heroicons/react/outline';

function Search(props) {
  return (
    <div className='mx-4 my-3'>
      <label
        htmlFor='search'
        className='relative mx-auto block max-w-xs text-gray-400 focus-within:text-gray-600'
      >
        <SearchIcon
          width={20}
          height={20}
          className='pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 transform'
        />
        <input
          type='seach'
          name='search'
          id='search'
          onChange={event => props.handleSearch(event.target.value)}
          className='w-full rounded-xl border border-gray-300 p-1.5 text-center'
        />
      </label>
    </div>
  );
}

Search.propTypes = {
  handleSearch: PropTypes.func.isRequired
};

export default Search;
