import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

type WordmarkProps = {
  /**
   * "default" — charcoal on a light surface (header).
   * "inverse" — white on the dark footer.
   */
  tone?: "default" | "inverse";
  className?: string;
};

/**
 * The "ADVANCE / MANUFACTURERS" wordmark, stacked on two lines.
 *
 * Header and footer each carried their own copy, with their own i18n namespace
 * (`Header.brand` vs `Footer.brand`) for the very same two words, and divergent
 * a11y — the header named its link with `aria-label`, the footer with an
 * `sr-only` span. Both now read from `Brand.*` and expose one accessible name:
 * the two visible lines are `aria-hidden` (they are typography, split for
 * layout, and would otherwise be announced as two unrelated fragments) and a
 * single `sr-only` span carries the full name. That name reaches the enclosing
 * link, so callers must NOT add an `aria-label` of their own.
 */
export default function Wordmark({ tone = "default", className }: WordmarkProps) {
  const t = useTranslations("Brand");
  const inverse = tone === "inverse";

  return (
    <span className={cn("flex flex-col leading-none", className)}>
      <span
        aria-hidden="true"
        className={cn(
          "font-display text-wordmark uppercase",
          inverse ? "text-white" : "text-foreground",
        )}
      >
        {t("primary")}
      </span>
      <span
        aria-hidden="true"
        className={cn(
          "mt-[3px] text-wordmark-sub font-semibold uppercase",
          inverse ? "text-on-inverse-surface/55" : "text-on-surface-variant",
        )}
      >
        {t("secondary")}
      </span>
      <span className="sr-only">
        {t("primary")} {t("secondary")}
      </span>
    </span>
  );
}