import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";


const MenuIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="50" height="50"
        viewBox="0 0 50 50"
        style={{ fill: "#C2C2CA" }}><path d="M 2 9 L 2 11 L 48 11 L 48 9 L 2 9 z M 2 24 L 2 26 L 48 26 L 48 24 L 2 24 z M 2 39 L 2 41 L 48 41 L 48 39 L 2 39 z"></path></svg>
)
const CloseIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="50" height="50"
        viewBox="0 0 50 50"
        style={{ fill: "#C2C2CA" }}><path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"></path></svg>
)

const Navbar: NextPage = () => {

    const router = useRouter();
    const [isNavbarOpened, setIsNavbarOpened] = useState(false);

    const showNavbar = () => {
        setIsNavbarOpened(!isNavbarOpened);
    }
    const links = [
        {
            href: "/", label: "Amirmoghi3", isActive: router.pathname === "/",
        },
        {
            href: "/resume", label: "Who I Am", isActive: router.pathname === "/resume",
        },
    ]
    return (
        <div className="p-5">
            <nav className="flex justify-between flex-wrap items-start">
                <div className="hidden md:flex">
                    {links.map(({ href, label, isActive }) => (
                        <Link href={href} key={href} >
                            <a className={`${isActive ? "border-secondary" : "border-light-primary"} mx-2 text-secondary border-2 hover:border-secondary p-2`}>{label}</a>
                        </Link>
                    ))}
                </div>
                <div className="flex flex-col md:hidden w-full">
                    <div className="flex flex-row justify-between">
                        <button onClick={showNavbar}>
                            {isNavbarOpened ? <CloseIcon /> : <MenuIcon />}
                        </button>
                        <div className="border-b-2 border-b-secondary p-2">
                            <Link href={links[0].href}>
                                <a className="text-secondary text-sm md:text-xl">{links[0].label}</a>
                            </Link>
                        </div>
                    </div>
                    <div className="flex flex-col  border-secondary ">
                        {isNavbarOpened && links.slice(1).map(({ href, label, isActive }) => (
                            <Link href={href} key={href} >
                                <a className={`${isActive ? "border-secondary" : "border-light-primary"} my-2 text-secondary border-2 hover:border-secondary p-2`}>{label}</a>
                            </Link>
                        ))}
                    </div>

                </div>
            </nav>

        </div>
    )
}

export default Navbar;