import Image from "next/image";
import Link from "next/link";
import { ROUTES } from "@/lib/routes";

const badgeClasses = [
  // Centred on the page container on both desktop and mobile.
  "absolute top-[clamp(10px,2.5vh,22px)] left-1/2 z-[9998] flex shrink-0 -translate-x-1/2 cursor-pointer items-center justify-center",
  "transition-transform duration-300 hover:scale-105",
  "max-[769px]:top-[2.2vh] max-[501px]:top-[10px]",
].join(" ");

function BadgeImage() {
  return (
    <Image
      src="/images/brand/logo.svg"
      alt="Excellence Emblem Logo"
      width={70}
      height={70}
      priority
      unoptimized
      className="block h-[clamp(56px,4.5vw,70px)] w-[clamp(80px,6.9vw,110px)] max-[501px]:h-[clamp(50px,4.5vw,70px)]"
    />
  );
}

/** Wolf emblem. Links home on inner pages; static on the home page itself. */
export function WolfBadge({ asLink = true }: { asLink?: boolean }) {
  if (!asLink) {
    return (
      <div className={badgeClasses} title="Excellence Emblem" aria-label="Excellence Wolf Badge">
        <BadgeImage />
      </div>
    );
  }
  return (
    <Link
      href={ROUTES.home}
      className={badgeClasses}
      title="Excellence Emblem"
      aria-label="Excellence Wolf Badge"
    >
      <BadgeImage />
    </Link>
  );
}