import React, { forwardRef } from 'react';
import classNames from 'classnames/bind';

import styles from './SearchBar.module.scss';
import SearchIcon from '@images/icons/ic-search.svg';

const cn = classNames.bind(styles);

interface Props {
  onClick: React.MouseEventHandler<HTMLButtonElement>;
  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
  placeholderText: string;
}

const SearchBar = forwardRef<HTMLInputElement, Props>(({ onClick, onKeyDown, placeholderText }, ref) => {
  return (
    <form name="searchForm" className={cn('search-form')}>
      <button onClick={onClick}>
        <img src={SearchIcon} alt="SearchIcon" />
      </button>
      <input type="search" onKeyDown={onKeyDown} placeholder={placeholderText} ref={ref} defaultValue="" />
    </form>
  );
});

SearchBar.displayName = 'SearchBar';

export default SearchBar;