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

interface LogoProps {
  /** "dark" = black artwork (use on light bg) · "light" = white artwork (use on dark bg) */
  variant?: "dark" | "light";
  className?: string;
  /** width × height — defaults sized for navbar at h-10 */
  width?: number;
  height?: number;
  priority?: boolean;
}

/**
 * The real Steel-Tech brand mark — both variants are transparent PNG.
 * - dark: black artwork, transparent background → use on white/light surfaces
 * - light: white artwork, transparent background → use on dark surfaces / photos
 */
export function Logo({
  variant = "dark",
  className,
  width = 600,
  height = 200,
  priority = false,
}: LogoProps) {
  const src =
    variant === "light" ? "/images/logo/logo-light.png" : "/images/logo/logo-dark.png";

  return (
    <Image
      src={src}
      alt="Steel-Tech Custom Parts"
      width={width}
      height={height}
      priority={priority}
      className={cn("h-auto w-auto object-contain", className)}
    />
  );
}

/**
 * Cross-fading logo — shows both variants stacked and toggles opacity.
 * Used in the navbar so the brand mark stays visible whether the header is
 * over a dark hero (light variant) or a scrolled white surface (dark variant),
 * with no flicker between the two states.
 */
export function LogoCrossfade({
  isLight,
  className,
}: {
  isLight: boolean;
  className?: string;
}) {
  return (
    <span className={cn("relative inline-block", className)}>
      <Image
        src="/images/logo/logo-dark.png"
        alt="Steel-Tech Custom Parts"
        width={600}
        height={200}
        priority
        className={cn(
          "h-full w-auto object-contain transition-opacity duration-300",
          isLight ? "opacity-0" : "opacity-100"
        )}
      />
      <Image
        src="/images/logo/logo-light.png"
        alt=""
        aria-hidden
        width={600}
        height={200}
        priority
        className={cn(
          "absolute inset-0 h-full w-auto object-contain transition-opacity duration-300",
          isLight ? "opacity-100" : "opacity-0"
        )}
      />
    </span>
  );
}