import styles from '@/components/styles/Navbar.module.css'
import Link from 'next/link'
import {useRouter} from 'next/router'

const Navbar = () => {

	const router = useRouter();
	let currentRoute:string = router.pathname;

  return (
    <div className={styles.mainmenu}>
        <div>
            <a href='/' style={{ display: 'flex'}}>
                <img className={styles.logo} src="/squash.webp" alt="" />
                <span className={styles.logoText + ' font-bold'}>SQUASH</span>
            </a>
        </div>
        <nav className={styles.nav}>
            <ul className={styles.navList}>
                <li className={styles.navItem}>
									<Link className={`${styles.navAnchor} ${currentRoute === '/' ? styles.active : null}`} href="/">Home</Link>
								</li>
                <li className={styles.navItem}>
									<Link className={`${styles.navAnchor} ${currentRoute === '/about' ? styles.active : null}`} href="about">About Us</Link>
								</li>
                <li className={styles.navItem}>
									<Link className={`${styles.navAnchor} ${currentRoute === '/contact' ? styles.active : null}`} href="contact">Contact</Link>
								</li>
            </ul>
        </nav>
        <div>
            <Link href='contact' className={`button-primary ${styles.navCTA}`}>Contact Us</Link>
						<button className={styles.mobileToggle}>
							<span className={styles.menuBurger}></span>
							<span className={styles.menuBurger}></span>
							<span className={styles.menuBurger}></span>
						</button>
        </div>
    </div>
  )
}

export default Navbar