import { useEffect, useState } from "react";
import { brandingUrl, hasBranding } from "../branding";
import Icon from "./Icon";

/**
 * Kopfzeichen der Oberfläche: entweder das hinterlegte Logo (dann ohne
 * Schriftzug) oder das eingebaute Zeichen mit dem Namen.
 *
 * Die Größe des Bildes ist per CSS gedeckelt, damit ein zu großes oder sehr
 * breites Logo das Layout nicht auseinanderziehen kann.
 */
export default function BrandMark() {
  const [logo, setLogo] = useState(false);

  useEffect(() => {
    let aktiv = true;
    hasBranding("logo").then((da) => aktiv && setLogo(da));
    return () => {
      aktiv = false;
    };
  }, []);

  if (logo) {
    return (
      <img
        className="brand-logo"
        src={brandingUrl("logo")}
        alt="Vorrania"
        onError={() => setLogo(false)}
      />
    );
  }

  return (
    <>
      <span className="mark"><Icon name="box" size={18} /></span>
      Vorrania
    </>
  );
}