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

/** Typographic BhoFit wordmark — serif Bho + tracked Fit. */
export function BrandMark({
  className,
  size = "md",
  invert = false,
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
  invert?: boolean;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-baseline gap-[0.12em] leading-none",
        invert ? "text-[var(--on-ink)]" : "text-foreground",
        className,
      )}
    >
      <span
        className={cn(
          "font-display tracking-tight",
          size === "sm" && "text-[1.35rem]",
          size === "md" && "text-[1.55rem]",
          size === "lg" && "text-[1.85rem]",
        )}
      >
        Bho
      </span>
      <span
        className={cn(
          "font-medium uppercase tracking-[0.28em]",
          size === "sm" && "text-[0.62rem]",
          size === "md" && "text-[0.68rem]",
          size === "lg" && "text-[0.78rem]",
        )}
      >
        Fit
      </span>
    </span>
  );
}

/** CMS logo if set, otherwise the BhoFit wordmark. */
export function BrandLockup({
  name,
  logoUrl,
  className,
  size = "md",
}: {
  name?: string;
  logoUrl?: string;
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const custom = Boolean(logoUrl && !/fliemart/i.test(logoUrl));
  if (custom) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={logoUrl}
        alt={name || "BhoFit"}
        className={cn(
          "w-auto object-contain",
          size === "sm" && "h-6 max-w-[100px]",
          size === "md" && "h-7 max-w-[120px]",
          size === "lg" && "h-9 max-w-[148px]",
          className,
        )}
      />
    );
  }
  return <BrandMark className={className} size={size} />;
}