// @flow
import React from 'react';
import styled from 'styled-components';
import SearchIconLight from '../SearchIconLight/SearchIconLight';
import defaultTheme from '../../../Theme/ApoliticalBrand';
import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';

type Props = {
  /** what to do when clicked */
  onClick?: () => ?boolean,
}

const Button = styled.button`
  width: ${defaultTheme.remify(40)};
  background: none;
  border: 0;
  margin-right: ${defaultTheme.remify(-35)};
  &:hover {
    cursor: pointer;
  }
`;

/**
 * An button that can be used to do searches
 */
const SearchIconButton = ({ onClick } : Props) => (
  <Button value="search-submit" onClick={onClick}>
    <SearchIconLight />
    <ScreenReaderText text="Click here to search" />
  </Button>
);

SearchIconButton.defaultProps = {
  onClick() {},
};

export default SearchIconButton;