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

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

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

  if (hasLogo && logoUrl) {
    return (
      <div className={`flex items-center gap-2.5 ${className}`}>
        <img
          src={logoUrl}
          alt={appName}
          className={`${s.box} ${s.rounded} object-contain`}
        />
        <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>
  );
}