"use client";

import React from "react";

/**
 * Ist das Fenster schmaler als der `md`-Breakpoint (768 px)?
 *
 * Nötig, weil unterhalb `md` die Seitenleiste über den Inhalt fährt statt ihn
 * zu verdrängen, und eine geschlossene Schublade muss dann auch für
 * Screenreader und Tastatur verschwinden (`aria-hidden`, `inert`). Über reine
 * CSS-Klassen ist das nicht zu haben: `max-md:` verändert die Darstellung,
 * nicht den Zugänglichkeitsbaum. Ohne Breitenprüfung wäre die Leiste auch auf
 * dem Desktop dauerhaft unerreichbar.
 *
 * `useSyncExternalStore` statt Effekt plus State: `matchMedia` ist genau so
 * ein externer Speicher, und beim Server-Rendering liefert die Momentaufnahme
 * `false`, die Leiste ist dort also sichtbar, was ohne JavaScript richtig ist.
 */
const ABFRAGE = "(max-width: 767px)";

function abonnieren(melde: () => void) {
  const abfrage = window.matchMedia(ABFRAGE);
  abfrage.addEventListener("change", melde);
  return () => abfrage.removeEventListener("change", melde);
}

export function useIstSchmal(): boolean {
  return React.useSyncExternalStore(
    abonnieren,
    () => window.matchMedia(ABFRAGE).matches,
    () => false
  );
}