// Tobeads — AudioToggle (pixel mute/unmute button)
// Fixed bottom-left pixel button. Reflects + controls the global mute state.

const { useState: useStateAudio, useEffect: useEffectAudio } = React;

function AudioToggle() {
  const [muted, setMuted] = useStateAudio(() => window.AudioManager ? window.AudioManager.isMuted() : true);

  useEffectAudio(() => {
    if (!window.AudioManager) return;
    setMuted(window.AudioManager.isMuted());
    return window.AudioManager.subscribe(setMuted);
  }, []);

  function toggle() {
    if (!window.AudioManager) return;
    window.AudioManager.unlock();
    const m = window.AudioManager.toggleMute();
    if (!m) { window.AudioManager.playSelect(); }
  }

  return (
    <button onClick={toggle} className="aw-audio-toggle" title={muted ? 'Sound off' : 'Sound on'} aria-label={muted ? 'Unmute' : 'Mute'}>
      <span className="aw-audio-ico" aria-hidden="true">
        {muted ? (
          <svg width="16" height="16" viewBox="0 0 16 16" shapeRendering="crispEdges">
            <rect x="1" y="6" width="3" height="4" fill="currentColor"/>
            <rect x="4" y="4" width="2" height="8" fill="currentColor"/>
            <rect x="6" y="2" width="2" height="12" fill="currentColor"/>
            <rect x="10" y="5" width="2" height="2" fill="currentColor"/>
            <rect x="12" y="7" width="2" height="2" fill="currentColor"/>
            <rect x="14" y="5" width="2" height="2" fill="currentColor"/>
            <rect x="10" y="9" width="2" height="2" fill="currentColor"/>
            <rect x="14" y="9" width="2" height="2" fill="currentColor"/>
            <rect x="12" y="11" width="2" height="2" fill="currentColor"/>
            <rect x="10" y="7" width="2" height="2" fill="currentColor" opacity="0"/>
          </svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 16 16" shapeRendering="crispEdges">
            <rect x="1" y="6" width="3" height="4" fill="currentColor"/>
            <rect x="4" y="4" width="2" height="8" fill="currentColor"/>
            <rect x="6" y="2" width="2" height="12" fill="currentColor"/>
            <rect x="10" y="5" width="2" height="6" fill="currentColor"/>
            <rect x="13" y="3" width="2" height="10" fill="currentColor"/>
          </svg>
        )}
      </span>
      <span className="px aw-audio-label">{muted ? 'SND OFF' : 'SND ON'}</span>
    </button>
  );
}
window.AudioToggle = AudioToggle;