import { useAmbientMusic } from '../context/AmbientMusicContext';
import './GlobalMusicPlayer.css';

export default function GlobalMusicPlayer() {
  const { enabled, playing, volume, setVolume, togglePlay } = useAmbientMusic();

  return (
    <div
      className="global-music-player"
      data-sfx="off"
      role="region"
      aria-label="Background music controls"
    >
      <button
        type="button"
        className="global-music-player__play"
        onClick={togglePlay}
        aria-label={playing ? 'Pause background music' : 'Play background music'}
        title={playing ? 'Pause music' : enabled ? 'Play music' : 'Enable & play music'}
      >
        {playing ? (
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor" />
            <rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor" />
          </svg>
        ) : (
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8 5v14l11-7z" fill="currentColor" />
          </svg>
        )}
      </button>
      <label className="global-music-player__vol" title="Music volume">
        <span className="sr-only">Music volume</span>
        <input
          type="range"
          min={0}
          max={100}
          step={5}
          value={Math.round(volume * 100)}
          onChange={(e) => setVolume(parseInt(e.target.value, 10) / 100)}
          aria-valuenow={Math.round(volume * 100)}
          aria-valuemin={0}
          aria-valuemax={100}
        />
      </label>
    </div>
  );
}