import { cn } from '@/lib/cn';

/**
 * Official UQO wordmark (PNG @2x, recoloured) + product name.
 * `inverted` for the blue header; `withText=false` for compact spots.
 */
export function Logo({ className, inverted = false, withText = true, size = 'md' }: { className?: string; inverted?: boolean; withText?: boolean; size?: 'sm' | 'md' | 'lg' }) {
  const h = size === 'lg' ? 'h-12' : size === 'sm' ? 'h-6' : 'h-8';
  return (
    <span className={cn('inline-flex items-center gap-2.5', className)} aria-label="UQO-Chat">
      <img src={inverted ? '/uqo-logo-white.png' : '/uqo-logo.png'} alt="UQO" className={cn(h, 'w-auto select-none')} draggable={false} />
      {withText && (
        <span className={cn('leading-none border-l pl-2.5', inverted ? 'border-white/30' : 'border-neutral-line')}>
          <span className={cn('block font-bold tracking-tight', size === 'lg' ? 'text-[22px]' : 'text-[16px]', inverted ? 'text-white' : 'text-uqo-blue-dark')}>UQO-Chat</span>
          <span className={cn('block font-medium tracking-wide whitespace-nowrap', size === 'lg' ? 'text-[12px]' : 'text-[10.5px]', inverted ? 'text-white/75' : 'text-neutral-muted')}>Tuteur IA · IMM1003 · IMM1033</span>
        </span>
      )}
    </span>
  );
}