import './Navigation.css';
import { Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import 'bootstrap/dist/js/bootstrap.min';
import AdminHeaderComp from './components/AdminHeaderComp/AdminHeaderComp.jsx';
import ProfileHeaderComp from './components/ProfileHeaderComp/ProfileHeaderComp.jsx';
import RegHeaderComp from './components/RegHeaderComp/RegHeaderComp.jsx';
import LoginHeaderComp from './components/LoginHeaderComp/LoginHeaderComp.jsx';

const Navigation = ({ routes }) => {
  const indexPageLink = routes.filter((route) => route.index === false).shift();

  return (
    <header>
        <nav className="navbar navbar-expand-lg navbar-light bg-light sticky-top">
            <div className="container-fluid">
                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
                    <div className = "d-flex"><img className="img-fluid" src="src/assets/Logo.png"></img>
                        <div className = "LogoText d-none d-sm-block">
                            Codemonitor
                        </div>
                    </div>
                </Navbar.Brand>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="navbar-collapse collapse justify-content-end" id="navbarNav">
                    <div className="navbar-nav">
                        <RegHeaderComp></RegHeaderComp>
                        <LoginHeaderComp></LoginHeaderComp>
                    </div>
                </div>
            </div>
      </nav>
  </header>
  );
};

Navigation.propTypes = {
  routes: PropTypes.array,
};

export default Navigation;