import React, { useEffect, useState } from 'react';
import { Input, Icon } from 'semantic-ui-react';
import cx from 'classnames';
import './SearchInput.css';
export const SearchInput = ({ onSearch }) => {
    const [value, setValue] = useState('');
    useEffect(() => {
        onSearch(value);
    }, [value, onSearch]);
    return (React.createElement("div", { className: cx('HIRO_SearchInput', {
            'HIRO_SearchInput--active': !!value,
        }) },
        React.createElement(Input, { fluid: true, placeholder: "Search for issue...", onChange: (event) => setValue(event.target.value), value: value }),
        React.createElement(Icon, { onClick: value ? () => setValue('') : undefined, name: value ? 'x' : 'search', fitted: true })));
};
