import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { useState, useEffect} from "react";
import logo from '../assets/img/logo.svg';
import navIcon1 from '../assets/img/nav-icon1.svg';
import navIcon3 from '../assets/img/nav-icon2.svg';
import navIcon2 from '../assets/img/nav-icon3.svg';


const NavBar = () => {
  const [activeLink, setActiveLink] = useState('home');
  const [scrolled, setScrolled] = useState(false);
//check for scrolling
  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 50) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    }

    window.addEventListener("scroll", onScroll);
  // remove event listener when components unmounts
    return () => window.removeEventListener("scroll", onScroll);
  }, [])

  const onUpdateLink = (value) => {
    setActiveLink(value)
  }
  return (
    <Navbar expand="lg" className= {scrolled ? "scrolled": ""}>
      <Container>
        <Navbar.Brand href="#home">
            <img src={logo} alt="logo" /> 
        </Navbar.Brand>
        <Navbar.Toggle/>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('home')}>Home</Nav.Link>
            <Nav.Link href="#skills" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('skills')}>skills</Nav.Link>
            <Nav.Link href="#projects" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('projects')}>Projects</Nav.Link>
          </Nav>
          <span className="navbar-text">
                <div className="social-icon"> 
                    <a href="#"><img src={navIcon1} alt="nav-icon1" /></a>
                    <a href="#"><img src={navIcon2} alt="nav-icon2" /></a>
                    <a href="#"><img src={navIcon3} alt="nav-icon3" /></a>
                </div>
                <button className="vvd" onClick={() => console.log('connect')}>
                    <span>Let's connect!</span>
                </button>
          </span>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default NavBar;