import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
import { chrome as chromeDe, type Chrome } from "@/content/chrome";
import { TransitionLink } from "@/components/motion/TransitionLink";

export interface WordmarkProps {
  size?: "nav" | "footer";
  href?: string;
  className?: string;
  /** Optional monogram rendered before the name (header 28 px, footer 40 px). */
  mark?: ReactNode;
  /** Texte der Hülle. Ohne Angabe die deutsche Fassung. */
  chrome?: Chrome;
}

/**
 * HTML wordmark: ANELIA WOLF (Jost 300, ls .32em) over a gold hairline and the
 * sub-line. One `<a>` with aria-label „Anelia Wolf – Startseite“.
 * Nav: 1.0625rem, name only – rule and sub-line are the footer's job (the
 * header row has no width to spare between 1024 and 1440). Footer: fluid
 * 20–44 px name, sub-line gold at 0.45em / 0.18em tracking (spec §3.2: the
 * sub never out-tracks the name).
 */
export function Wordmark({ size = "nav", href = "/", className, mark, chrome = chromeDe }: WordmarkProps) {
  const footer = size === "footer";
  return (
    <TransitionLink
      href={href}
      aria-label={chrome.wordmark.ariaLabel}
      className={cn("wordmark group inline-flex max-w-full items-center", footer ? "gap-4 sm:gap-6" : "gap-4", className)}
    >
      {mark && (
        <span
          aria-hidden="true"
          className={cn("wordmark__mark shrink-0 [&_svg]:h-full [&_svg]:w-auto", footer ? "h-10" : "h-7")}
        >
          {mark}
        </span>
      )}
      <span
        className={cn(
          "wordmark__text flex flex-col",
          footer ? "min-w-0 text-[clamp(1.25rem,0.75rem+1.8vw,2.75rem)]" : "text-[1.0625rem]",
        )}
      >
        <span
          className={cn(
            "wordmark__name whitespace-nowrap pl-[0.32em] font-sans text-[1em] font-light uppercase leading-none tracking-[0.32em]",
            "text-fg",
          )}
        >
          {chrome.wordmark.name}
        </span>
        <span
          aria-hidden="true"
          className={cn("wordmark__rule rule-gold", footer ? "my-[0.3em]" : "hidden")}
        />
        <span
          className={cn(
            "wordmark__sub pl-[0.22em] font-sans font-normal uppercase",
            footer
              ? "max-sm:whitespace-normal max-sm:leading-[1.5] sm:whitespace-nowrap sm:leading-none text-[0.55em] tracking-[0.18em] text-gold sm:text-[0.45em]"
              : "hidden",
          )}
        >
          {chrome.wordmark.sub}
        </span>
      </span>
    </TransitionLink>
  );
}

export default Wordmark;