import { usePublicConfig } from '../lib/usePublicConfig'

/**
 * Znak instancji: logo z ustawien i nazwa marki.
 *
 * Jedno i drugie pochodzi z ustawien (`APP_LOGO_URL`, `APP_BRAND_NAME`), wiec
 * kazdy klient wstawia wlasne bez zmiany kodu.
 *
 * BRAK LOGO POKAZUJE SAMA NAZWE, BEZ GRAFIKI ZASTEPCZEJ.
 * ---------------------------------------------------------------------------
 * Wczesniej przy pustym `APP_LOGO_URL` pojawiala sie kropla w kolorze marki.
 * Wygladalo to jak logo klienta, choc nim nie bylo: instancja, ktora logo nie
 * wgrala, prezentowala sie cudzym znakiem. Nazwa bez grafiki jest uczciwsza
 * i czytelniejsza niz ikona, ktora nic nie znaczy.
 */
export function BrandMark({
  size = 'md',
  inverse = false,
}: {
  size?: 'sm' | 'md'
  inverse?: boolean
}) {
  const { brandName, logoUrl } = usePublicConfig()

  const text = size === 'sm' ? 'text-sm' : 'text-base'

  return (
    <span className="flex min-w-0 items-center gap-2.5">
      {/* Bez logo nie pokazujemy niczego w jego miejscu: sama nazwa marki. */}
      {logoUrl && (
        // Logo bywa poziome, wiec ograniczamy tylko wysokosc, a szerokosc
        // dobiera sie do proporcji. object-contain nie przycina i nie rozciaga.
        <img
          src={logoUrl}
          alt=""
          className={`${size === 'sm' ? 'h-7' : 'h-9'} w-auto max-w-[160px] shrink-0 object-contain`}
          // uszkodzony adres nie moze zostawiac pustej ramki
          onError={(e) => {
            e.currentTarget.style.display = 'none'
          }}
        />
      )}
      <span
        className={`truncate font-semibold tracking-tight ${text} ${
          inverse ? 'text-white' : 'text-slate-900'
        }`}
        title={brandName || undefined}
      >
        {brandName || 'Webinary'}
      </span>
    </span>
  )
}