import { useSite } from '../contexts/SiteContext.jsx'

// The instance logo, shown beside the MoonDot wherever the site says its own
// name (docs/website/THEMING_AND_NAV.md phase 5).
//
// Renders NOTHING unless this instance has a logo — `brand.logo` is the uploaded
// override or BRAND_LOGO, and its default is the empty string. That is what
// keeps an untouched instance byte-for-byte as today: the MoonDot stands alone
// exactly as it does now, and the logo is an addition an operator opts into.
//
// It sits beside the moon rather than replacing it. The moon is the app's own
// mark and appears on surfaces (maintenance, login) that must render before the
// settings fetch resolves; swapping it out would leave those momentarily blank.
//
// Deliberately not used for the footer's "powered by Runic Gateway" emblem
// (SiteFooter.jsx) — that badge is the project's mark, not the instance's, and
// must not follow brand_assets (§4.11).
export default function BrandLogo({ height = 22, alt = '', style }) {
  const { brand, siteTitle } = useSite()
  if (!brand.logo) return null
  return (
    <img
      src={brand.logo}
      // Decorative by default: every call site puts the site title in text right
      // next to it, so alt text here would have a screen reader say the name
      // twice. A caller that renders the logo alone passes its own alt.
      alt={alt || ''}
      aria-hidden={alt ? undefined : true}
      title={siteTitle}
      style={{ height, width: 'auto', maxWidth: height * 6, objectFit: 'contain', display: 'block', ...style }}
    />
  )
}