import Link from "next/link";
import Image from "next/image";
import React from "react";

interface LogoProps {
  className?: string;
  variant?: "light" | "dark";
}

// Real brand lockup copied from the live template (templates/GAH/images/) —
// logo.svg is the full-color mark (dark wordmark text, for light backgrounds
// like the navbar), logo-white.png is the same mark recolored white (for
// dark backgrounds like the footer). Not an invented placeholder icon.
export const Logo: React.FC<LogoProps> = ({ className = "", variant = "dark" }) => {
  const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "Global Assignment Help";

  return (
    <Link href="/" className={`inline-flex items-center transition-opacity hover:opacity-90 ${className}`} aria-label={`${siteName} Home`}>
      {variant === "light" ? (
        // logo-white.png's real file dimensions are 170×54 (ratio ~3.15:1), not 4:1 —
        // width/height below are scaled from that real ratio, not the old guessed 200×50,
        // which is what triggered Next's "width or height modified, but not the other"
        // warning (the `h-15 w-auto` CSS was correct; the declared intrinsic ratio wasn't).
        <Image src="/icons/logo-white.png" alt={siteName} width={189} height={60} className="h-10 sm:h-12 lg:h-15 w-auto" priority />
      ) : (
        // logo.svg's real viewBox is 501.28×150.74 (ratio ~3.33:1), not 4:1 — same fix.
        <Image src="/icons/logo.svg" alt={siteName} width={200} height={60} className="max-[359px]:h-9 h-10 sm:h-12 lg:h-15 w-auto" priority />
      )}
    </Link>
  );
};