// Universal mobile tab-bar shown on screens ≤720px.
// Agnostic of portal internals — dispatches global events & body class toggles.

const MobileTabbar = ({ portal, onVoice, onMenu, onPortalSwitch }) => {
  const portalLabel = {
    heim: "Heim", arzt: "Arzt", apotheke: "Apotheke", therapeut: "Therapie"
  }[portal] || "App";

  return (
    <nav className="mobile-tabbar" role="navigation" aria-label="Hauptnavigation">
      <button className="tab-btn" onClick={onMenu} aria-label="Menü">
        <Icon name="menu" size={20} />
        <span className="lbl">Menü</span>
      </button>
      <button className="tab-btn" onClick={() => window.dispatchEvent(new CustomEvent('medlink:search'))} aria-label="Suche">
        <Icon name="search" size={18} />
        <span className="lbl">Suche</span>
      </button>
      <button className="mic-tab" onClick={onVoice} aria-label="Sprach-Notiz" title="Sprach-Notiz (V)">
        <Icon name="mic" size={22} />
      </button>
      <button className="tab-btn" onClick={onPortalSwitch} aria-label="Rolle wechseln">
        <Icon name={portal === "arzt" ? "stethoscope" : portal === "apotheke" ? "pill" : portal === "therapeut" ? "activity" : "home"} size={18} />
        <span className="lbl">{portalLabel}</span>
      </button>
      <button className="tab-btn" onClick={() => window.dispatchEvent(new CustomEvent('medlink:profile'))} aria-label="Konto">
        <Icon name="user" size={18} />
        <span className="lbl">Konto</span>
      </button>
    </nav>
  );
};

Object.assign(window, { MobileTabbar });