import Image from "next/image";

const ICON_ASPECT = 512 / 490;

export function Logo({
  variant = "dark",
  iconSize = 32,
  textSize = "text-base sm:text-lg",
  className = "",
  priority = false,
  showSubtitle = false,
}: {
  variant?: "dark" | "light";
  iconSize?: number;
  textSize?: string;
  className?: string;
  priority?: boolean;
  showSubtitle?: boolean;
}) {
  const icon = variant === "light" ? "/logo/logo-mark-white.png" : "/logo/logo-mark-black.png";
  const textColor = variant === "light" ? "text-white" : "text-charcoal-950";
  const subtitleColor = variant === "light" ? "text-white/70" : "text-charcoal-400";

  return (
    <span className={`inline-flex min-w-0 items-center gap-2 ${className}`}>
      <Image
        src={icon}
        alt=""
        width={iconSize}
        height={Math.round(iconSize * ICON_ASPECT)}
        style={{ height: iconSize, width: "auto" }}
        priority={priority}
        className="shrink-0"
      />
      <span className="flex min-w-0 flex-col justify-center leading-tight">
        <span className={`uppercase ${textColor} ${textSize}`}>
          <span className="font-medium tracking-wide">Visit</span>{" "}
          <span className="font-extrabold tracking-wide">Chinguitti</span>
        </span>
        {showSubtitle ? (
          <span className="flex flex-col gap-0.5">
            <span
              className={`truncate text-[9px] font-medium uppercase tracking-[0.18em] sm:text-[10px] ${subtitleColor}`}
            >
              Experience Mauritania
            </span>
            <span
              className={`truncate text-[8px] font-bold uppercase tracking-[0.12em] sm:text-[9px] ${subtitleColor}`}
            >
              Travel · Discover · Connect
            </span>
          </span>
        ) : null}
      </span>
    </span>
  );
}