import Link from "next/link";
import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Logo } from "./Logo";

const links = [
  { name: "blog", href: "/blog" },
  { name: "projects", href: "/projects" },
  { name: "github", href: "https://git.peroxy.dev/kookroach" },
];
export const Navbar = () => {
  const [showMenu, setShowMenu] = useState(false);

  return (
    <nav className="lg:p-4 p-2 lg:py-10 mx-6 flex flex-row justify-between">
      <Link
        href="/"
        id="logo"
        className="flex flex-row gap-2 items-center group"
      >
        <Logo />
        <div className="font-bold text-4xl font-mono transition-all ease-in duration-100 text-action group-hover:text-secondary">
          peroxy
          <span className="text-sm">.dev</span>
        </div>
      </Link>
      <div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
        {links.map(({ name, href }) => (
          <Link href={href} key={name}>
            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
              {name}
            </button>
          </Link>
        ))}
      </div>
      <div className="xl:hidden flex">
        <button onClick={() => setShowMenu(true)} className="text-2xl">
          <MenuIcon />
        </button>
      </div>
      <AnimatePresence>
        {showMenu && (
          <div className="fixed h-screen w-screen top-0 left-0">
            <motion.div
              className="absolute left-0 top-0 h-full w-full bg-black/70 z-10"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            />
            <motion.div
              className={`z-40 absolute w-1/2 bg-blue-900
                right-0 top-0 px-10 py-6 h-full`}
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ ease: "easeInOut", duration: 0.4 }}
            >
              <button onClick={() => setShowMenu(false)} className="text-2xl">
                <CloseIcon />
              </button>
              <div className="flex flex-col gap-10 mt-10 font-bold font-mono">
                {links.map(({ name, href }) => (
                  <Link href={href} key={name}>
                    <button>{name}</button>
                  </Link>
                ))}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </nav>
  );
};
