import React from 'react';
import { useSound } from '../../providers/sound-provider';
import '../../styles/ui.css';

export function SettingsPanel() {
  const [theme, setTheme] = React.useState('dark');
  const [sound, setSound] = React.useState(true);
  const [powerMode, setPowerMode] = React.useState(false);
  const { setEnabled, playSound } = useSound();

  const handleSoundToggle = (value: boolean) => {
    setSound(value);
    setEnabled(value);
    if (value) {
      playSound('success');
    }
  };

  const handleThemeChange = () => {
    playSound('click');
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  const handlePowerMode = (value: boolean) => {
    playSound(value ? 'success' : 'click');
    setPowerMode(value);
  };

  return (
    <div className="settings-panel">
      <div className="settings-option">
        {sound ? (
          <svg className="icon" viewBox="0 0 24 24">
            <path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3"/>
          </svg>
        ) : (
          <svg className="icon" viewBox="0 0 24 24">
            <path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3M3 3l18 18"/>
          </svg>
        )}
        <span className="option-text">Sound Effects</span>
        <label className="switch">
          <input 
            type="checkbox" 
            checked={sound}
            onChange={(e) => handleSoundToggle(e.target.checked)}
          />
          <span className="slider"></span>
        </label>
      </div>
    </div>
  );
}