// Mute toggle — small, character-based button that controls window.KomonichiSound.
// State lives in localStorage (handled inside sound.js); we listen for the
// "komonichi:muted" event so multiple instances stay in sync.
(function () {
  const { useState, useEffect, useCallback } = React;

  function MuteButton({ style }) {
    const [muted, setMuted] = useState(() =>
      window.KomonichiSound ? window.KomonichiSound.isMuted() : false
    );

    useEffect(() => {
      const f = (e) => setMuted(!!(e.detail && e.detail.muted));
      window.addEventListener("komonichi:muted", f);
      return () => window.removeEventListener("komonichi:muted", f);
    }, []);

    const toggle = useCallback(() => {
      if (window.KomonichiSound) window.KomonichiSound.toggleMuted();
    }, []);

    const label = muted ? "sound is off — click to turn on" : "sound is on — click to mute";
    // Inline SVG speaker icons (cone + two waves, or cone + diagonal slash when muted).
    // currentColor lets the parent button drive the stroke color.
    const ICON_ON = React.createElement("svg", {
      viewBox: "0 0 24 24", width: "16", height: "16",
      fill: "none", stroke: "currentColor",
      strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round",
      "aria-hidden": "true",
    },
      React.createElement("path", { d: "M4 9v6h3.5L13 19V5L7.5 9H4z" }),
      React.createElement("path", { d: "M16 8.5c1.2 1 1.2 6 0 7" }),
      React.createElement("path", { d: "M18.5 6c2.4 2 2.4 10 0 12" })
    );
    const ICON_OFF = React.createElement("svg", {
      viewBox: "0 0 24 24", width: "16", height: "16",
      fill: "none", stroke: "currentColor",
      strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round",
      "aria-hidden": "true",
    },
      React.createElement("path", { d: "M4 9v6h3.5L13 19V5L7.5 9H4z" }),
      React.createElement("line", { x1: "16", y1: "9",  x2: "21", y2: "14" }),
      React.createElement("line", { x1: "21", y1: "9",  x2: "16", y2: "14" })
    );
    return React.createElement("button", {
      type: "button",
      className: "mute-btn" + (muted ? " muted" : ""),
      onClick: toggle,
      title: label,
      "aria-label": label,
      "aria-pressed": muted,
      style,
    },
      React.createElement("span", { className: "mute-glyph", "aria-hidden": "true" },
        muted ? ICON_OFF : ICON_ON
      )
    );
  }

  window.KomonichiMute = { MuteButton };
})();