import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
const SearchWrapper = styled.div `
  display: flex;
  border-radius: 4px;
  border: 1px solid rgba(23, 146, 255, 0.3);
  width: 100%;
  padding: 0 10px 0 10px;
  height: 35px;
  margin: 0 0 5px 0;
  align-items: center;
`;
const Input = styled.input `
  font-size: 14px;
  line-height: 26px;
  width: 100%;
  font-family: Bold;
  color: black;
  border: none;
  :focus {
    border: none;
    outline: none;
  }
  ::placeholder {
    color: #002446;
    opacity: 0.2;
  }
`;
const Close = () => (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: "block", margin: "auto" }, children: [_jsx("path", { d: "M1.46338 1.46558L10.3923 10.3945", stroke: "#BEE1FF", strokeWidth: "2" }), _jsx("path", { d: "M1.46338 10.3923L10.3923 1.4634", stroke: "#BEE1FF", strokeWidth: "2" })] }));
class SearchInput extends React.Component {
    inputRef = React.createRef();
    handleCloseClick = (e) => {
        const input = this.inputRef.current;
        if (input) {
            input.value = "";
            this.setState({ isSearching: false });
            this.props.handleInput("");
        }
    };
    handleInput = (e) => {
        this.props.handleInput(e.currentTarget.value);
    };
    render() {
        return (_jsxs(SearchWrapper, { children: [_jsx(Input, { placeholder: this.props.placeholder, onInput: this.handleInput, ref: this.inputRef }), _jsx("div", { onClick: this.handleCloseClick, children: _jsx(Close, {}) })] }));
    }
}
export default SearchInput;
//# sourceMappingURL=search-input.js.map