import React, { useState, useContext } from "react"
import styles from "./HomeNav.module.css"
import { FaBars, FaChevronDown } from "react-icons/fa";

import { UserContext } from "../../context/UserContext";

export default function HomeNav() {
  const [navOpen, setNavOpen] = useState(false)

  const toggleNav = () => setNavOpen((prev) => !prev)

  const { user } = useContext(UserContext);

  return (
    <nav className={styles.nav}>
      <FaBars
        className={`${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
        onClick={toggleNav}
        aria-label="Toggle navigation"
        aria-expanded={navOpen}
      />

      <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
        <li id="nav-logo" className={styles.logo}>
          <span>vontor.cz</span>
        </li>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="#portfolio">Portfolio</a>
        </li>
        <li className={styles.hasSubmenu}>
          <details>
            <summary>
              Services
              <FaChevronDown className={`${styles.caret} ml-2 inline-block`} aria-hidden="true" />
            </summary>
            <ul className={styles.submenu}>
              <li><a href="#web">Web development</a></li>
              <li><a href="#integration">Integrations</a></li>
              <li><a href="#support">Support</a></li>
            </ul>
          </details>
        </li>
        <li>
          <a href="#contactme-form">Contact me</a>
        </li>
      </ul>
    </nav>
  )
}