import React, { useState } from 'react';

import './index.scss';

export default function SearchBar({ keyword, placeholderText, onChange }) {
  const [text, setText] = useState('');

  function onChangeHandler(event) {
    const value = event.target.value;
    onChange(value);
    setText(value);
  }

  return (
    <div className="search-box">
      <input
        className="search-input"
        type="search"
        key="random1"
        value={keyword}
        placeholder={placeholderText}
        onChange={onChangeHandler}
      />
      {text.length > 0 && (
        <h2 className="paraphrase">
          Showing search results for: <span className="keyword">{text}</span>
        </h2>
      )}
    </div>
  );
}