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);

	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
					onClick={() => setMenuToggle(!MenuToggle)}
					className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
				>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			{/* Nav */}
			<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
				<Link href="/">
					<a>Start</a>
				</Link>

				<Link href="/unsere-leistungen">
					<a>Unsere Leistungen</a>
				</Link>

				<Link href="/über-uns">
					<a>Über uns</a>
				</Link>

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

				<Link href="/Kontakt">
					<a>Kontakt</a>
				</Link>
			</nav>
		</navbar>
	);
};

export default Header;