import { DEFAULT_LANG, type Lang } from '../i18n/config';
import logo from './cbar-logo.svg';

/**
 * CBAR's own lockup, exported from the design system's Figma file (node
 * 2002:2) — see the comment at the top of the SVG for the source and the date.
 *
 * One file, three languages. The Figma file draws the lockup once, in
 * Azerbaijani, and has no English counterpart; the previous pair came from
 * cbar.az, where the wordmark had to be recoloured by hand to survive the navy
 * shell. The design system's own file already ships the monochrome white
 * variant, so it is used verbatim — and using it everywhere keeps the mark one
 * shape across the three languages rather than switching between a white
 * silhouette and a gold-and-green emblem when the language changes.
 *
 * An `<img>` rather than an inline `<svg>`: at ~105 kB of path data this
 * belongs in Vite's asset graph as its own file, not inlined into the JS bundle
 * on every page load. The cost is that the mark cannot take `currentColor` —
 * which is why it is baked white and why the only places it may be drawn are
 * the navy rail and the navy hero band, both of which stay navy in dark mode.
 *
 * `alt` still varies by language, and that is deliberate now that the image
 * does not: the wordmark on screen is Azerbaijani either way, so the accessible
 * name is the one part of the mark that can meet the reader in their own
 * language. It lives here rather than in the message catalogue because it names
 * the institution the file depicts, not chrome copy.
 */
const ALT: Record<Lang, string> = {
  az: 'Azərbaycan Respublikasının Mərkəzi Bankı',
  ru: 'Центральный банк Азербайджанской Республики',
  en: 'The Central Bank of the Republic of Azerbaijan',
};

/**
 * The SVG's own `viewBox`, restated here so the attributes can be written on
 * the `<img>`.
 *
 * Every call site sizes the mark with `h-* w-auto`, which leaves the browser
 * with no width at all until 105 kB of path data has arrived — the element is
 * 0px wide and then jumps to its full width, shifting the rail heading, the
 * hero band and, most visibly, the tour dialog. The attributes declare the
 * ratio up front; the classes still decide the rendered size.
 */
const INTRINSIC = { width: 350, height: 68 } as const;

export function CbarLogo({
  lang = DEFAULT_LANG,
  className,
  width = INTRINSIC.width,
  height = INTRINSIC.height,
}: {
  lang?: Lang;
  className?: string;
  width?: number;
  height?: number;
}) {
  return (
    <img src={logo} alt={ALT[lang]} className={className} width={width} height={height} />
  );
}