function Header({ query, setQuery, onSearch }) {
  return (
    <header>
      <h1>
        <img src="../public/oramap-logo.svg" alt="Logo" style={{ height: '40px', marginRight: '10px', verticalAlign: 'middle' }} />
        Ora
      </h1>
      <div className="search-bar">
        <input
          type="text"
          placeholder="Enter family name..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button onClick={onSearch}>Search</button>
      </div>
    </header>
  );
}

export default Header;