import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { UrlObject } from "url";

export interface NavigationItemProps {
  text: string;
  iconUrl?: string;
  href: string;
}

export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) {
  const router = useRouter();

  let active = false;
  if (href === "/" && router.pathname === "/") active = true;
  if (href !== "/" && router.pathname.startsWith(href)) active = true;

  return (
    <li className="navigation-li">
      <Link href={href} passHref>
        <a className={active ? "navigation-item active" : "navigation-item"}>
          {iconUrl && <Image src={iconUrl} width="24" height="24" alt="" />}
          <span className="text-navigation">{text}</span>
        </a>
      </Link>
    </li>
  );
}