import Image from "next/image";

type LogoProps = {
  /** Set true when placed on a dark (navy) surface, so the wordmark stays legible. */
  onDark?: boolean;
  className?: string;
  /** Override the image sizing (defaults to a compact header size). */
  imageClassName?: string;
  /** Use alt="" for a duplicate logo on the same page (e.g. the footer) so screen readers announce it once. */
  alt?: string;
};

/**
 * Official Vasundhara Infotech logo. Renders at its native aspect ratio (228:31)
 * so it is never stretched or cropped.
 */
export default function Logo({ onDark = false, className = "", imageClassName = "h-6 w-auto sm:h-7", alt = "Vasundhara Infotech" }: LogoProps) {
  const image = (
    <Image
      src="/logo.svg"
      alt={alt}
      width={228}
      height={31}
      priority
      className={`${imageClassName} ${onDark ? "brightness-0 invert" : ""}`}
    />
  );

  return (
    <span className={`inline-flex items-center ${className}`}>{image}</span>
  );
}