'use client';
import { useState } from 'react';
import { cn } from '@/lib/cn';
import { monogram } from '@/lib/profile';

/**
 * Company logo with graceful degradation: tries each candidate URL in order (profile logo → icon → legacy), falls back
 * to a monogram plate. Plain `<img>` (remote hosts are unknown, so `next/image` optimisation is not used); lazy by
 * default, `referrerPolicy="no-referrer"` so third-party hosts do not learn which profile was viewed.
 */
export function CompanyLogo({ name, candidates, size = 40, className, priority = false, rounded = 'md' }: { name: string; candidates: string[]; size?: number; className?: string; priority?: boolean; rounded?: 'sm' | 'md' | 'lg' }) {
  const [idx, setIdx] = useState(0);
  const src = candidates[idx];
  const radius = rounded === 'sm' ? 'rounded-[3px]' : rounded === 'lg' ? 'rounded-[10px]' : 'rounded-[6px]';
  const style = { width: size, height: size };
  if (!src) {
    return (
      <span className={cn('mono inline-flex shrink-0 select-none items-center justify-center border border-rule bg-surface-2 font-semibold text-ink-2', radius, className)} style={{ ...style, fontSize: Math.max(10, Math.round(size * 0.38)) }} aria-hidden data-logo="monogram">
        {monogram(name)}
      </span>
    );
  }
  return (
    <span className={cn('inline-flex shrink-0 items-center justify-center overflow-hidden border border-rule bg-white', radius, className)} style={style} data-logo="image">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={src} alt="" width={size} height={size} loading={priority ? 'eager' : 'lazy'} decoding="async" referrerPolicy="no-referrer" className="h-full w-full object-contain p-[12%]" onError={() => setIdx((i) => i + 1)} />
    </span>
  );
}