import styles from "../styles/Navbar.module.css";
// Import Component
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
// Import Images
import LogoAgs from "../public/Logo_AGS.png";
import { useState } from "react";

const Header = () => {
	const router = useRouter();
	const [MenuToggle, setMenuToggle] = useState(false);
	console.log(router.pathname);
	return (
		<navbar className={styles.Navbar}>
			<div className={styles.container}>
				{/* logo */}
				<div onClick={() => router.push("/")} className={styles.Logo}>
					<Image
						src={LogoAgs}
						alt="Logo"
						layout="responsive"
						// blurDataURL="data:..." automatically provided
						// placeholder="blur" // Optional blur-up while loading
					/>
				</div>
				{/* Menu Toggle */}
				<div
					className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
					onClick={() => setMenuToggle(!MenuToggle)}
				>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			{/* Nav */}
			{/* TODO: Set Menu Toggle false if click */}
			<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
				<Link href="/">
					<a
						className={router.pathname == "/" ? styles.NavActive : ""}
						onClick={() => setMenuToggle(false)}
					>
						Start
					</a>
				</Link>

				<Link href="/unsere-leistungen">
					<a
						className={router.pathname == "/unsere-leistungen" ? styles.NavActive : ""}
						onClick={() => setMenuToggle(false)}
					>
						Unsere Leistungen
					</a>
				</Link>

				<Link href="/ueber-uns">
					<a
						className={router.pathname == "/ueber-uns" ? styles.NavActive : ""}
						onClick={() => setMenuToggle(false)}
					>
						Über uns
					</a>
				</Link>

				{/* <li>Unser Team</li> */}

				<Link href="/Kontakt">
					<a
						className={router.pathname == "/Kontakt" ? styles.NavActive : ""}
						onClick={() => setMenuToggle(false)}
					>
						Kontakt
					</a>
				</Link>
			</nav>
		</navbar>
	);
};

export default Header;