/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
"use client";
import { faComments } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { usePathname } from "next/navigation";
import Script from "next/script";
import React, { type JSX } from "react";

/**
 * Conditionally renders the footer component when
 * not on the home page.
 * @returns A JSX element.
 */
export const Footer = (): JSX.Element | null => {
  const pathname = usePathname();
  const isRootPath = pathname === "/";

  if (isRootPath) {
    return null;
  }
  return (
    <div
      className="fixed w-full bottom-0 z-50 flex
    justify-between items-center h-14 px-4
    bg-[--background] text-[--foreground]"
    >
      <p>{`© Naomi Carrigan`}</p>
      <a href="https://chat.nhcarrigan.com" rel="noreferrer" target="_blank">
        <FontAwesomeIcon icon={faComments} size="lg" />
      </a>
      <div className="h-4/5" id="tree-nation-offset-website"></div>
      <Script
        src="https://widgets.tree-nation.com/js/widgets/v1/widgets.min.js?v=1.0"
        strategy="beforeInteractive"
      ></Script>
      <Script
        id="tree-nation"
        strategy="afterInteractive"
      >{`TreeNationOffsetWebsite({code: 'a17464e0cd351220', lang: 'en', theme: 'dark'}).render('#tree-nation-offset-website');`}</Script>
    </div>
  );
};