import Image from "next/image";

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

// Official logos (copies of medora-design-system/02-brand): full colour for light surfaces, white-on-teal for teal ones.
const SRC = { light: "/medora-logo.svg", brand: "/medora-teal-logo.svg" } as const;

/**
 * Medora logo for a sidebar header. `symbol` shows only the round symbol (the left 258 of the 884-wide artwork,
 * cropped rather than redrawn) for the collapsed icon rail. `tone="auto"` follows the saved sidebar choice on
 * <html data-sidebar-tone> (set before the first paint): both logos are drawn and CSS shows the right one, so the
 * logo never swaps after hydration.
 */
export function SidebarLogo({ tone, symbol = false, className }: { tone: "light" | "brand" | "auto"; symbol?: boolean; className?: string }) {
  const img = (src: string, extra?: string) => (
    <Image src={src} alt="Medora" width={884} height={238} priority unoptimized className={cn("h-9 w-auto", symbol && "h-8 max-w-none", !symbol && className, extra)} />
  );
  const logo =
    tone === "auto" ? (
      <>
        {img(SRC.light, "[html[data-sidebar-tone=brand]_&]:hidden")}
        {img(SRC.brand, "hidden [html[data-sidebar-tone=brand]_&]:block")}
      </>
    ) : (
      img(SRC[tone])
    );
  if (!symbol) return logo;
  return <span className={cn("block h-8 w-[35px] shrink-0 overflow-hidden", className)}>{logo}</span>;
}