import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { SearchBar } from './SearchBar/SearchBar.jsx';

export function Header({ onMenuClick, onMangaClick, onAddMangaClick }) {
  return (
    <header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
      <button 
        onClick={onMenuClick}
        className="ml-4 text-white p-2 md:hidden"
      >
        <FontAwesomeIcon icon={faBars} />
      </button>
      <div className="flex items-center flex-1">
        <a href="/" className="text-white text-2xl font-bold ml-4">
          Mangarr
        </a>
        <SearchBar 
          onMangaClick={onMangaClick}
          onAddMangaClick={onAddMangaClick}
        />
      </div>
    </header>
  );
}