export const Search = React.forwardRef((props, ref) => {
  const [isFocused, setFocus] = useState(false);
  const [isHovered, setHover] = useState(false);

  return (
    <InputContainer
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <StyledInput
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        isHovered={isHovered}
        ref={ref}
        {...props}
      />
      {isFocused && !props.value && (
        <StyledMagnifyingGlass
          isHovered={isHovered}
          isFocused={isFocused}
          onClick={props.onSearch}
        />
      )}
      {isFocused && props.value && (
        <StyledCloseCircle onClick={() => console.log("THIS DOES NOT FIRE")} />
      )}
      {!isFocused && (
        <StyledMagnifyingGlass
          isHovered={isHovered}
          isFocused={isFocused}
          onClick={props.onSearch}
        />
      )}
    </InputContainer>
  );
});