import { Video } from 'lucide-react';
import { useBranding } from '../contexts/BrandingContext';

const sizes = {
  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-32', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-40', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-48', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
};

export default function BrandLogo({ size = 'md', className = '' }) {
  const { appName, hasLogo, logoUrl, hideAppName } = useBranding();
  const s = sizes[size] || sizes.md;

  if (hasLogo && logoUrl) {
    // When the app name is hidden, let the logo expand to its natural aspect
    // ratio (w-auto) rather than being clamped into a tiny square.
    const imgClass = hideAppName
      ? `${s.h} w-auto ${s.maxW} ${s.rounded} object-contain`
      : `${s.box} ${s.rounded} object-contain`;
    return (
      <div className={`flex items-center ${hideAppName ? 'justify-center' : 'gap-2.5'} ${className}`}>
        <img src={logoUrl} alt={appName} className={imgClass} />
        {!hideAppName && <span className={`${s.text} font-bold gradient-text`}>{appName}</span>}
      </div>
    );
  }

  return (
    <div className={`flex items-center gap-2.5 ${className}`}>
      <div className={`${s.box} gradient-bg ${s.rounded} flex items-center justify-center`}>
        <Video size={s.icon} className="text-white" />
      </div>
      <span className={`${s.text} font-bold gradient-text`}>{appName}</span>
    </div>
  );
}