// @flow
import React from 'react';
import styled from 'styled-components';

import defaultTheme from '../../../Theme/ApoliticalBrand';

const Input = styled.input`
  height: 100%;
  width: 100%;
  margin-left: ${defaultTheme.remify(40)};
  font-size:  ${defaultTheme.remify(20)};
  font-weight: 300;
  color: ${defaultTheme.color.charcoal};
  caret-color: ${defaultTheme.color.purple};
  opacity: .7;
  border: 0;

  &:focus {
    background-color: ${defaultTheme.color.white};
  }

  ::placeholder {
    color: ${defaultTheme.color.charcoal};
  }
`;

type Props = {|
  textInput: any,
|}

/**
 * The input through which you can search
 */
const SearchInput = ({ textInput }: Props) => (
  <Input
    type="search"
    name="search"
    placeholder="Search"
    ref={textInput}
  />
);

export default SearchInput;