import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
import React__default, { useState } from 'react';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import './_commonjsHelpers-0c4b6f40.js';
import './web.dom.iterable-3fffc027.js';
import './core.get-iterator-method-95db387d.js';

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=' + encodeURIComponent(searchKey);
  };

  return React__default.createElement(
    Form,
    { inline: true, onSubmit: function onSubmit(e) {
        return submitSearch(e);
      } },
    React__default.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__default.createElement(
      Button,
      { variant: 'secondary', onClick: function onClick(e) {
          return submitSearch(e);
        } },
      btnText
    ),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        .mobile-search {\n          width: 75%;\n          margin-right: 15px;\n        }\n      '
    )
  );
};

export { Search as default };
