import Link from 'next/link';

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

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,
  showLogin = false,
}: 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 text-sm font-black flex items-center justify-center shrink-0"
              style={{ backgroundColor: 'var(--brand, #0a0a0a)', color: 'var(--brand-contrast, #fff)' }}
            >
              {iniciales(nombreEmpresa)}
            </span>
          )}
          <span className="text-lg font-black tracking-tight text-black truncate">
            {nombreEmpresa}
          </span>
        </div>
        {showLogin ? (
          <Link
            href="/login"
            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-3.5 py-2 text-sm font-semibold text-gray-700 transition-colors hover:border-gray-900 hover:text-black"
          >
            Entrar
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path
                d="M2 8h12M10 4l4 4-4 4"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </Link>
        ) : (
          <span className="text-xs font-semibold uppercase tracking-widest text-gray-400 shrink-0">
            {subtitle ?? 'Presupuesto de reforma'}
          </span>
        )}
      </div>
    </header>
  );
}