import React, { useState } from 'react'
import styles from './Header.module.css'

function Header() {
  const [isNavVisible, setIsNavVisible] = useState(false);

  const toggleNav = () => {
    setIsNavVisible(!isNavVisible);
  };

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.logo}>
          <span>LOGO</span>
        </div>
        <div className={`${styles.hamburger} ${isNavVisible ? styles.active : ''}`} onClick={toggleNav}>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav className={`${styles.nav} ${isNavVisible ? styles.navVisible : ''}`}>
          <ul className={styles.navList}>
            <li><a href="#home" onClick={toggleNav}>Home</a></li>
            <li><a href="#education" onClick={toggleNav}>Education</a></li>
            <li><a href="#experience" onClick={toggleNav}>Experience</a></li>
            <li><a href="#projects" onClick={toggleNav}>Projects</a></li>
            <li><a href="#about" onClick={toggleNav}>About</a></li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

export default Header