import { getDirection, type Locale } from "../LanguageSwitcher";

import { cx } from "./styles";
import type { NavSurface } from "./types";

/* Exported from Figma assets/eu-en (224:11275) and assets/eu-en - darkBg
   (238:2325). The emblem is drawn at the prescribed 48x32 on both surfaces;
   the source files are downscaled copies of the Figma exports. */
const EMBLEM_SRC: Record<NavSurface, string> = {
  light: "/assets/eu-flag.png",
  dark: "/assets/eu-flag-dark.png",
};

const EMBLEM_INTRINSIC_WIDTH = 192;
const EMBLEM_INTRINSIC_HEIGHT = 128;

export interface EuBadgeProps {
  /** "Funded by the European Union", already in the reader's language. */
  statement: string;
  /** Alt text for the emblem. Empty when the statement is rendered beside it. */
  emblemAlt?: string;
  /** Language of `statement` - drives the font switch and the text direction. */
  locale: Locale;
  surface: NavSurface;
  className?: string;
}

/**
 * The mandatory EU visibility lockup: emblem + funding statement.
 *
 * The lockup itself is pinned to `dir="ltr"` so the emblem always leads, which
 * is how the Arabic navigation frame (334:526) draws it; only the statement
 * carries the reader's own direction. The bar's own mirroring still moves the
 * whole badge from the top right (English) to the top left (Arabic).
 *
 * DEVIATION FROM FIGMA: the design sets the statement in EU reflex blue
 * (hex 0f2a8e). A raw hex is not permitted in a component here, and there is
 * no semantic token for a third-party brand colour, so the statement uses
 * --text-primary. It stays legible on both surfaces and the emblem still
 * carries the EU colours. Add a tier-2 token if the blue has to come back.
 */
export function EuBadge({
  statement,
  emblemAlt = "",
  locale,
  surface,
  className,
}: EuBadgeProps) {
  return (
    <div
      dir="ltr"
      className={cx("flex shrink-0 items-center gap-2xs", className)}
    >
      <img
        src={EMBLEM_SRC[surface]}
        alt={emblemAlt}
        width={EMBLEM_INTRINSIC_WIDTH}
        height={EMBLEM_INTRINSIC_HEIGHT}
        loading="eager"
        decoding="async"
        draggable={false}
        className="block h-[32px] w-[48px] shrink-0"
      />
      <span
        lang={locale}
        dir={getDirection(locale)}
        className="label-md block w-[96px] text-[var(--text-primary)]"
      >
        {statement}
      </span>
    </div>
  );
}