import react, { useState } from 'react';
import './Header.css'
import Button from '../Button/Button'

const Header = () => {

    const [activeLink , setActiveLink] = useState("home");

    const onClickLinkHandler = (activeLinkFunction) => {
        setActiveLink(activeLinkFunction);
    }
    return(
    <div id='header-part' className='header-div'>
        <div className='header-div__name'>
            <img src='../../../public/logo-portfolio-black.PNG' />
        </div>
        <div className='header-div__navbar'>
            <ul>
                <li onClick={() => onClickLinkHandler("home")} className={activeLink === "home" ? "active-Link" : ""}><a href='#header-part'>Home</a></li>
                <li onClick={() => onClickLinkHandler("about")} className={activeLink === "about" ? "active-Link" : ""}><a href='#about-part'>About</a></li>
                <li onClick={() => onClickLinkHandler("portfolio")} className={activeLink === "portfolio" ? "active-Link" : ""}><a href='#social-media-part'>Social Media</a></li>
                <li onClick={() => onClickLinkHandler("contact")} className={activeLink === "contact" ? "active-Link" : ""}><a href='#contact-part'>Contact</a></li>
            </ul>
        </div>
        <div className='header-div__button'>
            <Button>
                 Download Resume
            </Button>
        </div>
    </div>
    )
   
}

export default Header;