import Image from "next/image";

type BrandProps = {
  compact?: boolean;
  inverse?: boolean;
  className?: string;
};

export function Brand({ compact = false, inverse = false, className = "" }: BrandProps) {
  return (
    <span className={`inline-flex items-center ${className}`}>
      <Image
        src={"/images/puresaas_logo.webp"}
        alt="PureSaaS"
        width={2804}
        height={561}
        loading="eager"
        sizes={compact ? "140px" : "170px"}
        className={`${compact ? "h-7" : "h-8"} w-auto object-contain ${inverse ? "brightness-0 invert" : ""}`}
      />
    </span>
  );
}

export function LogoMark({ className = "h-9 w-9" }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 40 40"
      className={className}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M20 3.7 32.6 11v18L20 36.3 7.4 29V11L20 3.7Z"
        stroke="#5865FF"
        strokeWidth="2.2"
      />
      <path d="m20 18.3 12.6-7.25M20 18.3 7.4 11.05M20 18.3v18" stroke="#5865FF" strokeWidth="2.2" />
      <path d="m13.5 14.7 6.5-3.8 6.5 3.8-6.5 3.6-6.5-3.6Z" fill="#E4E8FF" stroke="#5865FF" strokeWidth="1.5" />
    </svg>
  );
}