import { useState, useEffect } from 'react';

/**
 * Mana Symbol Settings Component
 * Allows users to toggle between custom circular symbols and Scryfall SVG symbols
 */
export default function ManaSymbolSettings({ onSettingsChange }) {
  const [useSVG, setUseSVG] = useState(false);

  useEffect(() => {
    // Load setting from localStorage
    const savedSetting = localStorage.getItem('mana-symbol-svg');
    if (savedSetting !== null) {
      const shouldUseSVG = savedSetting === 'true';
      setUseSVG(shouldUseSVG);
      if (onSettingsChange) {
        onSettingsChange({ useSVG: shouldUseSVG });
      }
    }
  }, [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 bg-bg-secondary rounded-lg">
      <div className="flex-1">
        <h4 className="text-sm font-medium text-text-primary">Mana Symbol Style</h4>
        <p className="text-xs text-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 ${
          useSVG ? 'bg-accent-ember' : 'bg-gray-300'
        }`}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
            useSVG ? 'translate-x-6' : 'translate-x-1'
          }`}
        />
      </button>
    </div>
  );
}