type TenantBrandProps = {
  nombreEmpresa: string;
  logoUrl: string | null;
  subtitle?: string;
};

function iniciales(nombre: string): string {
  return nombre
    .split(/\s+/)
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase() ?? '')
    .join('');
}

// Cabecera de marca del reformista para el funnel público y las páginas de
// solicitud. El cliente final ve el branding del reformista, no el de Reformix.
export default function TenantBrand({ nombreEmpresa, logoUrl, subtitle }: TenantBrandProps) {
  return (
    <header className="bg-white border-b border-gray-200">
      <div className="container py-4 flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 min-w-0">
          {logoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={logoUrl}
              alt={nombreEmpresa}
              className="h-9 w-auto max-w-[160px] object-contain"
            />
          ) : (
            <span className="h-9 w-9 rounded-lg bg-black text-white text-sm font-black flex items-center justify-center shrink-0">
              {iniciales(nombreEmpresa)}
            </span>
          )}
          <span className="text-lg font-black tracking-tight text-black truncate">
            {nombreEmpresa}
          </span>
        </div>
        <span className="text-xs font-semibold uppercase tracking-widest text-gray-400 shrink-0">
          {subtitle ?? 'Presupuesto de reforma'}
        </span>
      </div>
    </header>
  );
}