export default function NavBar({ tab, setTab }) {
  return (
    <header className="topbar">
      <div>
        <div className="title">Recommendation Engine</div>
        <div className="subtitle">Movies and Credit Cards</div>
      </div>

      <nav className="tabs">
        <button className={tab === "movies" ? "tab active" : "tab"} onClick={() => setTab("movies")}>
          Movies
        </button>
        <button className={tab === "cards" ? "tab active" : "tab"} onClick={() => setTab("cards")}>
          Credit Cards
        </button>
      </nav>
    </header>
  );
}