SoundControlBar.tsx

import React from 'react';

interface SoundControlBarProps {
  volume: number; // 0 to 1
  isMuted: boolean;
  onVolumeChange: (volume: number) => void;
  onMuteToggle: () => void;
}

export const SoundControlBar: React.FC<SoundControlBarProps> = ({
  volume,
  isMuted,
  onVolumeChange,
  onMuteToggle,
}) => {
  return (
    <div className="flex items-center gap-2 p-1 bg-theme-primary/30 rounded-lg shadow">
      <button
        onClick={onMuteToggle}
        className="px-2 py-1 text-lg bg-pink-600 hover:bg-pink-700 text-white rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500"
        aria-label={isMuted ? 'Unmute game sounds' : 'Mute game sounds'}
        aria-pressed={isMuted}
      >
        {isMuted ? '🔇' : '🔊'}
      </button>
      <input
        type="range"
        min="0"
        max="100"
        value={isMuted ? 0 : Math.round(volume * 100)}
        onChange={(e) => {
            const newVolume = parseInt(e.target.value, 10) / 100;
            if (isMuted && newVolume > 0) { // If user interacts with slider while muted, unmute
                onMuteToggle(); // This will trigger a re-render, onVolumeChange will apply the new volume
            }
            onVolumeChange(newVolume);
        }}
        className="w-20 h-2 accent-pink-500 cursor-pointer"
        aria-label="Game volume"
        disabled={isMuted} // Optionally disable slider when muted, or let it unmute
      />
    </div>
  );
};