import { useState, useEffect } from 'react';

/**
 * Mana Symbol Settings Component
 * Allows users to toggle between custom circular symbols and Scryfall SVG symbols
 */
function readUseSVGFromStorage() {
  if (typeof window === 'undefined') return false;
  const savedSetting = localStorage.getItem('mana-symbol-svg');
  return savedSetting === 'true';
}

export default function ManaSymbolSettings({ onSettingsChange }) {
  const [useSVG, setUseSVG] = useState(readUseSVGFromStorage);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const savedSetting = localStorage.getItem('mana-symbol-svg');
    if (savedSetting !== null && onSettingsChange) {
      onSettingsChange({ useSVG: savedSetting === 'true' });
    }
  }, [onSettingsChange]);

  const handleToggle = () => {
    const newUseSVG = !useSVG;
    setUseSVG(newUseSVG);
    localStorage.setItem('mana-symbol-svg', newUseSVG.toString());
    if (onSettingsChange) {
      onSettingsChange({ useSVG: newUseSVG });
    }
  };

  return (
    <div
      className="flex items-center space-x-3 p-3 rounded-xl"
      style={{ backgroundColor: 'var(--bg-secondary)' }}
    >
      <div className="flex-1">
        <h4
          className="text-sm font-medium"
          style={{ color: 'var(--text-primary)' }}
        >
          Mana Symbol Style
        </h4>
        <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
          {useSVG ? 'Using official Scryfall SVG symbols' : 'Using custom circular symbols'}
        </p>
      </div>
      <button
        onClick={handleToggle}
        className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
        style={{
          backgroundColor: useSVG ? 'var(--accent-ember)' : 'var(--bg-tertiary)',
        }}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
            useSVG ? 'translate-x-6' : 'translate-x-1'
          }`}
        />
      </button>
    </div>
  );
}