import Image from "next/image";
import { cn } from "@/lib/utils";

type LogoVariant = "auto" | "light" | "dark";

// Auto adapts to light/dark theme via tokens; light/dark force specific contrast
function inkClass(variant: LogoVariant) {
  if (variant === "light") return "text-[#FEFEFE]";
  if (variant === "dark") return "text-[#020202]";
  return "text-foreground";
}

/**
 * LogoFull — Brand logo made from bot icon + wordmark:
 * [Bot Icon] "Quto AI" in Fraunces font.
 */
export function LogoFull({
  className,
  variant = "auto",
}: {
  className?: string;
  variant?: LogoVariant;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-2.5 font-display text-xl font-bold tracking-tight select-none",
        inkClass(variant),
        className,
      )}
    >
      <Image
        src="/images/Cuto-logo.webp"
        alt=""
        width={28}
        height={28}
        className="size-[26px] sm:size-7 object-contain shrink-0"
        priority
      />
      <span className="font-display font-bold tracking-tight">Quto AI</span>
      <span className="sr-only">Quto AI</span>
    </span>
  );
}

/**
 * LogoMark — Compact icon for favicon or collapsed mobile view:
 * [Bot Icon]
 */
export function LogoMark({
  className,
  variant = "auto",
}: {
  className?: string;
  variant?: LogoVariant;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 font-display text-lg font-bold tracking-tight select-none",
        inkClass(variant),
        className,
      )}
      aria-hidden="true"
    >
      <Image
        src="/images/Cuto-logo.webp"
        alt="Quto AI"
        width={26}
        height={26}
        className="size-6.5 object-contain shrink-0"
      />
      <span className="sr-only">Quto AI</span>
    </span>
  );
}