import Image from "next/image";

/**
 * SAG logo mark — uses the real PNG from /public/sag-logo.png.
 * Falls back to a text wordmark if Image fails to load (handled by Next).
 */
export function SagLogoMark({ size = 32, className = "" }: { size?: number; className?: string }) {
  return (
    <Image
      src="/sag-logo.png"
      alt="South Armz Global"
      width={size}
      height={size}
      className={className}
      priority
    />
  );
}

/**
 * Per-entity logo placeholder — colored square with emoji + initial.
 * Will be replaced per entity as real logos become available in /public/logos/.
 */
export function EntityLogoBadge({
  emoji,
  primaryColor,
  size = 40,
  className = "",
}: {
  emoji?: string;
  primaryColor?: string;
  size?: number;
  className?: string;
}) {
  return (
    <div
      className={`flex items-center justify-center rounded-md shrink-0 ${className}`}
      style={{
        width: size,
        height: size,
        backgroundColor: primaryColor ? `${primaryColor}25` : undefined,
        fontSize: size * 0.55,
        lineHeight: 1,
      }}
    >
      {emoji ?? "🏢"}
    </div>
  );
}