---
const { initialLevel = 1 } = Astro.props;
---
<div class="level-toggle" role="group" aria-label="Niveau de lecture">
  <button type="button" class="lvl-btn" data-level="1" aria-pressed="true">Niveau 1</button>
  <button type="button" class="lvl-btn" data-level="2" aria-pressed="false">Niveau 2</button>
  <button type="button" class="lvl-btn" data-level="3" aria-pressed="false">Niveau 3</button>
</div>

<script is:inline>
(() => {
  const KEY = "archicratie.readingLevel";
  const buttons = Array.from(document.querySelectorAll(".lvl-btn"));

  function apply(level) {
    document.body.setAttribute("data-reading-level", String(level));
    buttons.forEach((b) => b.setAttribute("aria-pressed", b.dataset.level === String(level) ? "true" : "false"));
  }

  // Valeur par défaut : si rien n'est stocké, on met 1 (citoyen).
  // Si JS est absent/casse, le site reste lisible (tout s'affiche).
  const stored = Number(localStorage.getItem(KEY));
  const level = (stored === 1 || stored === 2 || stored === 3) ? stored : 1;

  apply(level);

  buttons.forEach((b) => {
    b.addEventListener("click", () => {
      const lvl = Number(b.dataset.level);
      localStorage.setItem(KEY, String(lvl));
      apply(lvl);
    });
  });
})();
</script>