import Image from "next/image";

/**
 * Authored wordmark variants shipped in `public/brand`. Keyed by the surface
 * the mark sits on rather than by colour, so restyling a surface cannot strand
 * the logo on a background it no longer reads against.
 */
const WORDMARK = {
  /** Deep forest — for light surfaces. */
  primary: "/brand/logo_primary.svg",
  /** Light — for dark surfaces. */
  inverse: "/brand/logo_inverse.svg",
  /** Muted grey — for when the mark should recede. */
  monochrome: "/brand/logo_monochrome.svg",
} as const;

/** Aspect ratio baked into the source files (viewBox 327.62 × 78.77). */
const WORDMARK_RATIO = 327.62 / 78.77;

export interface LogoProps {
  variant?: keyof typeof WORDMARK;
  /** Rendered height in px; width follows the authored aspect ratio. */
  height?: number;
  className?: string;
  /** Set for a mark in the first viewport — e.g. the marketplace nav. */
  priority?: boolean;
}

/** The Alqove wordmark: arch glyph plus lettering, as one locked-up asset. */
export function Logo({
  variant = "primary",
  height = 28,
  className,
  priority = false,
}: LogoProps) {
  return (
    <Image
      src={WORDMARK[variant]}
      alt="Alqove"
      height={height}
      width={Math.round(height * WORDMARK_RATIO)}
      // Next's image optimiser rejects SVG unless `dangerouslyAllowSVG` is set,
      // and a vector file has nothing for it to optimise anyway.
      unoptimized
      priority={priority}
      className={className}
    />
  );
}