import { Link } from "react-router";

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

/* Exported from Figma logo/sharp-er (317:5571) and logo/sharp-er-dark
   (317:7812). Intrinsic 334x46; the navigation draws it at 100px wide, which
   is the designed size in every navigation frame (desktop and mobile). */
const LOGO_SRC: Record<NavSurface, string> = {
  light: "/assets/sharp-er-logo.png",
  dark: "/assets/sharp-er-logo-dark.png",
};

const LOGO_INTRINSIC_WIDTH = 334;
const LOGO_INTRINSIC_HEIGHT = 46;

export interface BrandProps {
  /** Locale-prefixed home path, e.g. "/en". */
  href: string;
  /** Accessible name of the link; the image itself is decorative. */
  label: string;
  surface: NavSurface;
  className?: string;
}

/** The SHARP-ER wordmark, linking home. Sits at the inline start of the bar. */
export function Brand({ href, label, surface, className }: BrandProps) {
  return (
    <Link
      to={href}
      aria-label={label}
      className={cx(
        "inline-flex shrink-0 items-center rounded-control",
        FOCUS_RING,
        className,
      )}
    >
      <img
        src={LOGO_SRC[surface]}
        alt=""
        width={LOGO_INTRINSIC_WIDTH}
        height={LOGO_INTRINSIC_HEIGHT}
        loading="eager"
        decoding="async"
        draggable={false}
        className="block h-auto w-[100px]"
      />
    </Link>
  );
}