import React, { useState } from 'react';
import '../styleing/SearchBar.css';

const SearchBar = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleInputChange = (event) => {
    const value = event?.target?.value;
    setSearchTerm(value);
    onSearch(value); 
  };

  return (
    <div className="searchBar">
      <input
        type="text"
        className="search"
        value={searchTerm}
        onChange={handleInputChange}
        placeholder="Search for posts..."
      />
    </div>
  );
};

export default SearchBar;