/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
"use client";
import {
  faBars,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import React, { type JSX, useState, useCallback } from "react";
import { NavItems } from "../config/NavItems";
import { Rule } from "./rule";

/**
 * Conditionally renders the navigation component when
 * not on the home page.
 * @returns A JSX element.
 */
export const Navigation = (): JSX.Element | null => {
  const [ isOpen, setIsOpen ] = useState(false);

  const toggleMenu = useCallback((): void => {
    setIsOpen(!isOpen);
  }, [ isOpen ]);

  return (
    <div className="fixed w-full top-0 z-50"
      style={{ fontFamily: "OpenDyslexic Mono" }}>
      <nav
        className="w-full flex justify-between
        items-center h-14 px-4 bg-[--background] text-[--foreground]"
      >
        <a href="/">
          <Image
            alt="nhcarrigan's logo"
            height={50}
            src="https://cdn.nhcarrigan.com/logo.png"
            width={50}
          />
        </a>
        <div className="flex items-center">
          <button onClick={toggleMenu} type="button">
            <FontAwesomeIcon icon={isOpen
              ? faTimes
              : faBars} size="2x" />
          </button>
        </div>
      </nav>
      {isOpen
        ? <div className="bg-[--background] text-[--foreground]
            h-[50vh] overflow-y-auto">
          {NavItems.map((item, index) => {
            return (
              <a
                className="block py-2 px-4 text-2xl hover:bg-[--foreground]
                hover:text-[--background]"
                href={item.href}
                key={item.href}
                onClick={toggleMenu}
              >
                {index % 2 === 1
                  ? "🩷"
                  : "🩵"} {item.text}
              </a>
            );
          })}
        </div>
        : null}
      <Rule />
    </div>
  );
};