import React, { useState } from "react";
import { Link } from "react-router-dom";
import Search from "./Search";
import ".././styles/Header.css"
import LogoutButton from "./session/LogoutButton";

const Header = ({ login, setLogin }) => {
  const [show, setShow] = useState(false);

  return (
    <nav className="navbar navbar-expand-lg navbar-dark">
      <div id="parent" className="container-fluid">
        <Link className="navbar-brand" to="/">
          <img id="logo" src="../../../logo.jpeg" alt="Nisum Logo"></img>
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
          onClick={() => setShow((prev) => !prev)}
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div
          className={`collapse navbar-collapse ${show ? "show" : ""}`}
          id="navbarSupportedContent"
        >
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link className="nav-link" to="/products">
                Products
              </Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/promos">
                Promotions
              </Link>
            </li>
          </ul>
          
          <LogoutButton />
        </div>
      </div>
      <h1 id="page-title">Inventory, Promotions, Pricing</h1>
    </nav>
  );
};

export default Header;