import React, {useState} from 'react';
import {SearchForm, SearchInput, SearchButton, SearchIcon, HeaderSearchWrapper} from './styles';

interface SearchProps {}

export const HeaderSearch: React.FC<SearchProps> = (): JSX.Element => {
  const [searchValue, setSearchValue] = useState('');
  const onSubmit = (e: {preventDefault: () => void}) => {
    e.preventDefault();
    window.location.href = '/search?s=' + searchValue;
  };

  return (
    <HeaderSearchWrapper>
      <SearchForm onSubmit={onSubmit}>
        <SearchInput placeholder="Search" value={searchValue} onChange={e => setSearchValue(e.target.value)} />
        <SearchButton>
          <SearchIcon src={'/images/icons/search-icon.svg'} />
        </SearchButton>
      </SearchForm>
    </HeaderSearchWrapper>
  );
};

export default HeaderSearch;