import Image from "next/image";
import Link from "next/link";

type BrandWordmarkProps = {
  size?: "sm" | "md" | "lg";
  showTagline?: boolean;
  asLink?: boolean;
  iconOnly?: boolean;
};

const config = {
  sm: { icon: 28, wordmark: "text-sm", tagline: "text-[10px]" },
  md: { icon: 36, wordmark: "text-base", tagline: "text-xs" },
  lg: { icon: 52, wordmark: "text-2xl sm:text-3xl", tagline: "text-sm" },
} as const;

export function BrandWordmark({
  size = "md",
  showTagline = false,
  asLink = false,
  iconOnly = false,
}: BrandWordmarkProps) {
  const { icon, wordmark, tagline } = config[size];

  const content = (
    <span className="inline-flex items-center gap-2.5">
      <Image
        src="/nexus-icon.png"
        alt=""
        width={icon}
        height={icon}
        className="shrink-0"
        aria-hidden
      />
      {!iconOnly && (
        <span className="flex flex-col leading-tight">
          <span className={`${wordmark} font-bold tracking-tight`}>
            <span className="text-black">NINJA</span>{" "}
            <span className="text-brand-gradient">NEXUS</span>
          </span>
          {showTagline && (
            <span
              className={`${tagline} mt-0.5 font-medium uppercase tracking-[0.18em] text-nexus-muted`}
            >
              Ét system. Alt forbundet.
            </span>
          )}
        </span>
      )}
    </span>
  );

  if (asLink) {
    return (
      <Link href="/forside" className="inline-flex items-center" aria-label="Ninja Nexus forside">
        {content}
      </Link>
    );
  }

  return content;
}
