import { useState } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";

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 = () => {
  const location =  useLocation();
  const [isNavbarOpened, setIsNavbarOpened] = useState(false);

  const showNavbar = () => {
    setIsNavbarOpened(!isNavbarOpened);
  };
  const links = [
    {
      href: "/",
      label: "Amirmoghi3",
      isActive: location.pathname === "/",
    },
    {
      href: "/resume",
      label: "Who I Am",
      isActive: location.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 }) => (
            <NavLink
              className={`${
                isActive ? "border-secondary" : "border-light-primary"
              } mx-2 text-secondary border-2 hover:border-secondary p-2`}
              to={href}
              key={href}
            >
              {label}
            </NavLink>
          ))}
        </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 to={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 to={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;