import Image from "next/image";
import { BRAND } from "@/lib/site";

type Props = {
  /** `mark` = mountain only, `wordmark` = mountain + studio name. */
  variant?: "mark" | "wordmark";
  /** Rendered width in px. Height is derived from the file's real ratio. */
  width?: number;
  priority?: boolean;
  className?: string;
  /** Decorative by default — pass a label when the logo carries meaning. */
  alt?: string;
};

/**
 * Renders a brand asset at the correct aspect ratio.
 * Previously the 1344×768 mark was hard-coded as 36×36, 120×80, 180×120…
 * in six different files, which squashed the mountain differently each time.
 */
export function Logo({
  variant = "mark",
  width = 40,
  priority = false,
  className = "",
  alt = "",
}: Props) {
  const asset = BRAND[variant];

  return (
    <Image
      src={asset.src}
      alt={alt}
      width={width}
      height={Math.round((width * asset.height) / asset.width)}
      priority={priority}
      className={className}
    />
  );
}