import { UghIcon } from './Logo'

type Brand = { name: string; logoUrl: string | null; whiteLabel: boolean }

/** Logo de la organización, o su nombre si no subió logo. */
export function OrgMark({ brand, height = 32, className = '' }: { brand: Brand; height?: number; className?: string }) {
  if (brand.logoUrl) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={brand.logoUrl} alt={brand.name} style={{ height }} className={`w-auto max-w-[180px] object-contain ${className}`} />
  }
  return <span className={`font-display font-bold tracking-tight ${className}`} style={{ fontSize: height * 0.6 }}>{brand.name}</span>
}

/** "Funciona con UghPass". No aparece si la organización tiene marca blanca. */
export function PoweredBy({ brand, light = true }: { brand: Brand; light?: boolean }) {
  if (brand.whiteLabel) return null
  return (
    <a href="/" className={`inline-flex items-center gap-1 text-[11px] ${light ? 'text-gray-500' : 'text-gray-400'}`}>
      Funciona con <UghIcon size={14} gap={light ? '#121212' : '#ffffff'} />
      <span className="font-display"><b className={light ? 'text-piedra' : 'text-ink-950'}>Ugh</b><span className="font-light text-[#ff5500]">Pass</span></span>
    </a>
  )
}

/** Encabezado de pantallas públicas: logo propio, nombre (marca blanca) o el gancho de UghPass. */
export function PublicHeaderMark({ brand, hook }: { brand: Brand & { custom: boolean }; hook: string }) {
  if (brand.logoUrl) return <OrgMark brand={brand} height={30} />
  if (brand.whiteLabel || brand.custom) return <OrgMark brand={brand} height={26} className="text-piedra" />
  return (
    <p className="inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-widest text-brand-400">
      <UghIcon size={18} />{hook}
    </p>
  )
}