import { cn } from "@/lib/utils";

interface CommanderLogoProps {
  className?: string;
  /** Classes do container (expandido: proporção 3:2 da arte; recolhido: quadrado) */
  heightClass?: string;
}

export const CommanderLogo = ({
  className,
  heightClass = "h-36 w-full",
}: CommanderLogoProps) => {
  const imgClass = cn(
    "absolute inset-0 h-full w-full object-contain object-left",
    className
  );

  return (
    <div className={cn("relative w-full shrink-0", heightClass)}>
      <img
        src="/hgtx-commander-light.png"
        alt="HGTX Commander"
        className={cn(imgClass, "dark:hidden")}
      />
      <img
        src="/hgtx-commander-dark.png"
        alt="HGTX Commander"
        className={cn(imgClass, "hidden dark:block")}
      />
    </div>
  );
};