import { useLogoTone } from '../../lib/logo-tone'

interface Props {
  src: string
  alt: string
  /** Inner image height in px - the pad sizes around it */
  height?: number
  /** Max image width in px to prevent absurdly wide logos from dominating */
  maxWidth?: number
  className?: string
}

/**
 * Renders a remote logo (TMDB network / production company) on a small pad
 * whose color is chosen by sampling the logo's luminance:
 *   - dark-content logos sit on a near-white pad
 *   - light-content logos sit on a near-black pad
 *   - unknown / unloaded uses the dark-content default
 */
export default function BrandLogo({
  src,
  alt,
  height = 14,
  maxWidth = 80,
  className = '',
}: Props) {
  const tone = useLogoTone(src)
  const padCls =
    tone === 'light'
      ? 'bg-zinc-950/95 ring-white/15 shadow-md'
      : 'bg-white/95 ring-black/10 shadow-sm'

  // Vertical padding scales subtly with image height
  const vPad = Math.max(4, Math.round(height * 0.4))
  const hPad = Math.max(8, Math.round(height * 0.8))

  return (
    <span
      className={`inline-flex items-center justify-center rounded-md ring-1 ${padCls} ${className}`}
      style={{ paddingTop: vPad, paddingBottom: vPad, paddingLeft: hPad, paddingRight: hPad }}
      title={alt}
    >
      <img
        src={src}
        alt={alt}
        loading="lazy"
        className="object-contain block"
        style={{ height, maxWidth }}
      />
    </span>
  )
}
