import React, { useState } from'react';

const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
  const [activeSection, setActiveSection] = useState('general');

  const renderSettingsContent = () => {
    switch (activeSection) {
      case 'general':
        return (
          <div className="settings-section">
            <h2>General Settings</h2>
            <div className="settings-option">
              <p>Change Language</p>
              <select>
                <option value="en">English</option>
                <option value="es">Spanish</option>
                <option value="fr">French</option>
                <option value="de">German</option>
                <option value="it">Italian</option>
                <option value="pt">Portuguese</option>
                <option value="zh">Chinese</option>
                <option value="ja">Japanese</option>
                <option value="ko">Korean</option>
                <option value="ar">Arabic</option>
                <option value="ru">Russian</option>
                <option value="he">Hebrew</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Notifications</p>
              <label>
                <input type="checkbox" /> Enable notifications
              </label>
            </div>
            <div className="settings-option">
              <p>Notification Frequency</p>
              <select>
                <option value="instant">Instant</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="monthly">Monthly</option>
                <option value="quarterly">Quarterly</option>
                <option value="annually">Annually</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Time Zone</p>
              <select>
                <option value="utc">UTC</option>
                <option value="est">EST</option>
                <option value="pst">PST</option>
                <option value="gmt">GMT</option>
                <option value="cst">CST</option>
                <option value="mst">MST</option>
                <option value="bst">BST</option>
                <option value="cest">CEST</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Auto-Save</p>
              <label>
                <input type="checkbox" /> Enable auto-save
              </label>
            </div>
            <div className="settings-option">
              <p>Auto-Save Frequency</p>
              <select>
                <option value="5">Every 5 minutes</option>
                <option value="10">Every 10 minutes</option>
                <option value="15">Every 15 minutes</option>
                <option value="30">Every 30 minutes</option>
                <option value="60">Every hour</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Default Currency</p>
              <select>
                <option value="usd">USD</option>
                <option value="eur">EUR</option>
                <option value="gbp">GBP</option>
                <option value="jpy">JPY</option>
                <option value="cny">CNY</option>
                <option value="aud">AUD</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Date Format</p>
              <select>
                <option value="mm/dd/yyyy">MM/DD/YYYY</option>
                <option value="dd/mm/yyyy">DD/MM/YYYY</option>
                <option value="yyyy-mm-dd">YYYY-MM-DD</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Time Format</p>
              <select>
                <option value="12-hour">12-hour clock</option>
                <option value="24-hour">24-hour clock</option>
              </select>
            </div>
          </div>
        );
      case 'privacy':
        return (
          <div className="settings-section">
            <h2>Privacy Settings</h2>
            <div className="settings-option">
              <p>Data Collection</p>
              <label>
                <input type="checkbox" /> Allow data collection
              </label>
            </div>
            <div className="settings-option">
              <p>Location Access</p>
              <label>
                <input type="checkbox" /> Enable location access
              </label>
            </div>
            <div className="settings-option">
              <p>Two-Factor Authentication</p>
              <label>
                <input type="checkbox" /> Enable 2FA
              </label>
            </div>
            <div className="settings-option">
              <p>Data Export</p>
              <button>Export Data</button>
            </div>
            <div className="settings-option">
              <p>Cookie Policy</p>
              <label>
                <input type="checkbox" /> Accept cookie policy
              </label>
            </div>
            <div className="settings-option">
              <p>GDPR Compliance</p>
              <label>
                <input type="checkbox" /> I agree to GDPR terms
              </label>
            </div>
            <div className="settings-option">
              <p>CCPA Compliance</p>
              <label>
                <input type="checkbox" /> I agree to CCPA terms
              </label>
            </div>
            <div className="settings-option">
              <p>Biometric Data</p>
              <label>
                <input type="checkbox" /> Allow biometric data collection
              </label>
            </div>
          </div>
        );
      case 'theme':
        return (
          <div className="settings-section">
            <h2>Theme Settings</h2>
            <div className="settings-option">
              <p>Choose Theme Color</p>
              <input type="color" />
            </div>
            <div className="settings-option">
              <p>Font Size</p>
              <input type="range" min="10" max="30" />
            </div>
            <div className="settings-option">
              <p>Background Pattern</p>
              <select>
                <option value="solid">Solid</option>
                <option value="striped">Striped</option>
                <option value="dots">Dotted</option>
                <option value="grid">Grid</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Font Family</p>
              <select>
                <option value="arial">Arial</option>
                <option value="calibri">Calibri</option>
                <option value="helvetica">Helvetica</option>
              </select>
            </div>
            <div className="settings-option">
              <p>Button Style</p>
              <select>
                <option value="flat">Flat</option>
                <option value="raised">Raised</option>
                <option value="rounded">Rounded</option>
              </select>
            </div>
          </div>
        );
      case 'account':
        return (
          <div className="settings-section">
            <h2>Account Settings</h2>
            <div className="settings-option">
              <p>Change Name</p>
              <input type="text" placeholder="New Name" />
            </div>
            <div className="settings-option">
              <p>Change Email</p>
              <input type="email" placeholder="New Email" />
            </div>
            <div className="settings-option">
              <p>Change Password</p>
              <input type="password" placeholder="New Password" />
            </div>
            <div className="settings-option">
              <p>Delete Account</p>
              <button>Delete Account</button>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="popup-overlay">
      <div className="settings-content">
        <div className="settings-container">
          <div className="sidebar">
            <ul>
              <li onClick={() => setActiveSection('general')}>General</li>
              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
              <li onClick={() => setActiveSection('theme')}>Theme</li>
              <li onClick={() => setActiveSection('account')}>Account</li>
            </ul>
          </div>
          <div className="settings-main">
            <h2>Settings for {accountName}</h2>
            {renderSettingsContent()}
            <button className="close-popup" onClick={closeSettings}>Close</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;