import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-a4107da3.js';
import './es6.string.iterator-c990c18c.js';
import './core.get-iterator-method-e1de7503.js';
import './web.dom.iterable-4439f05a.js';
import React, { useState } from 'react';
import { _ as _slicedToArray } from './slicedToArray-641f241f.js';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';

var Search = function Search(props) {
  var _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === undefined ? 'Search' : _props$placeholder,
      _props$btnText = props.btnText,
      btnText = _props$btnText === undefined ? 'Search' : _props$btnText,
      _props$device = props.device,
      device = _props$device === undefined ? 'desktop' : _props$device;

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      searchKey = _useState2[0],
      setSearchKey = _useState2[1];

  var submitSearch = function submitSearch(e) {
    e.preventDefault();
    window.location.href = '/search?searchTerm=' + searchKey;
  };

  return React.createElement(
    Form,
    { inline: true, onSubmit: function onSubmit(e) {
        return submitSearch(e);
      } },
    React.createElement(FormControl, {
      className: device === 'mobile' ? 'mobile-search mr-sm-2' : 'mr-sm-2',
      type: 'text',
      placeholder: placeholder,
      value: searchKey,
      onChange: function onChange(e) {
        return setSearchKey(e.target.value);
      }
    }),
    React.createElement(
      Button,
      { variant: 'secondary', onClick: function onClick(e) {
          return submitSearch(e);
        } },
      btnText
    ),
    React.createElement(
      'style',
      { jsx: 'true' },
      '\n        .mobile-search {\n          width: 75%;\n          margin-right: 15px;\n        }\n      '
    )
  );
};

export default Search;
