import React, { useState, useEffect } from 'react';

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

  // Theme settings state
  const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
  const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
  const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
  const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
  const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
  const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
  const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
  const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
  const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
  const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
  const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
  const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
  const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
  const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
  const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
  const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
  const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
  const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());

  // General settings state
  const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
  const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
  const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
  const [timeFormat, setTimeFormat] = useState<string>('12-hour');
  const [timeZone, setTimeZone] = useState<string>('UTC');

  // Privacy settings state
  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);

  // FOSS settings state
  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);

  // Account settings state
  const [newName, setNewName] = useState<string>('');
  const [newEmail, setNewEmail] = useState<string>('');
  const [newPassword, setNewPassword] = useState<string>('');

  // Theme selection
  const [selectedTheme, setSelectedTheme] = useState<string>('default');


  // Effect to update CSS variables on theme state change
  useEffect(() => {
    document.documentElement.style.setProperty('--background-color', backgroundColor);
    document.documentElement.style.setProperty('--text-color', textColor);
    document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
    document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
    document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
    document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
    document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
    document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
    document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
    document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
    document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
    document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
    document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
    document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
    document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
    document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
    document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
    document.documentElement.style.setProperty('--font-family', fontFamily);
    document.documentElement.style.setProperty('--font-size', fontSize);
  }, [
    backgroundColor,
    textColor,
    inputBackgroundColor,
    inputButtonColor,
    inputButtonHoverColor,
    userMessageBackgroundColor,
    userMessageTextColor,
    aiMessageBackgroundColor,
    aiMessageTextColor,
    buttonBackgroundColor,
    buttonHoverBackgroundColor,
    modelsBackgroundColor,
    historyBackgroundColor,
    leftPanelBackgroundColor,
    conversationBackgroundColor,
    popUpTextColor,
    inputBorderColor,
    fontFamily,
    fontSize,
  ]);

  const renderSettingsContent = () => {
    switch (activeSection) {
      case 'general':
        return (
          <div className="settings-section">
            <h2>General Settings</h2>
            <div className="settings-option">
              <label>Preferred Language</label>
              <select
                value={preferredLanguage}
                onChange={(e) => setPreferredLanguage(e.target.value)}
              >
                <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="ru">Russian</option>
                <option value="ar">Arabic</option>
                {/* Add more languages as needed */}
              </select>
            </div>
            <div className="settings-option">
              <label>Preferred Currency</label>
              <select
                value={preferredCurrency}
                onChange={(e) => setPreferredCurrency(e.target.value)}
              >
                <option value="usd">USD</option>
                <option value="eur">EUR</option>
                <option value="gbp">GBP</option>
                <option value="jpy">JPY</option>
                <option value="cad">CAD</option>
                <option value="aud">AUD</option>
                <option value="chf">CHF</option>
                <option value="cny">CNY</option>
                <option value="inr">INR</option>
                {/* Add more currencies as needed */}
              </select>
            </div>
            <div className="settings-option">
              <label>Date Format</label>
              <select
                value={dateFormat}
                onChange={(e) => setDateFormat(e.target.value)}
              >
                <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>
                <option value="mm-dd-yyyy">MM-DD-YYYY</option>
                <option value="dd-mm-yyyy">DD-MM-YYYY</option>
                {/* Add more formats as needed */}
              </select>
            </div>
            <div className="settings-option">
              <label>Time Format</label>
              <select
                value={timeFormat}
                onChange={(e) => setTimeFormat(e.target.value)}
              >
                <option value="12-hour">12 Hour</option>
                <option value="24-hour">24 Hour</option>
                <option value="am-pm">AM/PM Format</option>
                {/* Add more formats if necessary */}
              </select>
            </div>
            <div className="settings-option">
              <label>Time Zone</label>
              <select
                value={timeZone}
                onChange={(e) => setTimeZone(e.target.value)}
              >
                <option value="GMT">GMT</option>
                <option value="EST">EST</option>
                <option value="CST">CST</option>
                <option value="MST">MST</option>
                <option value="PST">PST</option>
                <option value="UTC">UTC</option>
                <option value="BST">BST</option>
                <option value="IST">IST</option>
                <option value="CET">CET</option>
                <option value="JST">JST</option>
                {/* Add more time zones as needed */}
              </select>
            </div>
          </div>
        );

      case 'privacy':
        return (
          <div className="settings-section">
            <h2>Privacy Settings</h2>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableOnlineAI}
                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
                />
                Disable Online AI
              </label>
            </div>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableChatHistory}
                  onChange={() => setDisableChatHistory(!disableChatHistory)}
                />
                Disable Chat History Save
              </label>
            </div>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableAIMemory}
                  onChange={() => setDisableAIMemory(!disableAIMemory)}
                />
                Disable AI Memory
              </label>
            </div>
            <div className="settings-option">
              <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
            </div>
          </div>
        );

        case 'theme':
          return (
            <div className="settings-section">
              <h2>Theme Settings</h2>
        
              {/* Dropdown to select theme */}
              <div className="settings-option">
                <p>Select Theme</p>
                <select
                  value={selectedTheme}
                  onChange={(e) => {
                    const theme = e.target.value;
                    setSelectedTheme(theme); // Update state for selected theme
                    
                    // Apply the appropriate theme based on selection
                    switch (theme) {
                      case 'IOMARKET':
                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'WHITE':
                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
                        document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'BLACK':
                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'CUSTOM':
                        // Handle custom theme logic here
                        break;
                      default:
                        break;
                    }
                  }} // Handle theme selection
                >
                  <option value="default">Select your style...</option>
                  <option value="IOMARKET">IOMARKET</option>
                  <option value="WHITE">WHITE</option>
                  <option value="BLACK">BLACK</option>
                  <option value="CUSTOM">CUSTOM</option>
                </select>
              </div> 
              {/* Conditionally render theme settings only if "CUSTOM" is selected */}
              {selectedTheme === 'CUSTOM' && (
                <>
                  <div className="settings-option">
                    <p>Font Size</p>
                    <input
                      type="range"
                      min="12"
                      max="30"
                      value={parseInt(fontSize, 10)} // Ensure value is a number
                      onChange={(e) => {
                        const newSize = `${e.target.value}px`;
                        setFontSize(newSize);
                        document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
                      }}
                    />
                    <span>{fontSize}</span>
                  </div>
                  <div className="settings-option">
                    <p>Background Color</p>
                    <input
                      type="color"
                      value={backgroundColor}
                      onChange={(e) => setBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Text Color</p>
                    <input
                      type="color"
                      value={textColor}
                      onChange={(e) => setTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Background Color</p>
                    <input
                      type="color"
                      value={inputBackgroundColor}
                      onChange={(e) => setInputBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Button Color</p>
                    <input
                      type="color"
                      value={inputButtonColor}
                      onChange={(e) => setInputButtonColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Button Hover Color</p>
                    <input
                      type="color"
                      value={inputButtonHoverColor}
                      onChange={(e) => setInputButtonHoverColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>User Message Background Color</p>
                    <input
                      type="color"
                      value={userMessageBackgroundColor}
                      onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>User Message Text Color</p>
                    <input
                      type="color"
                      value={userMessageTextColor}
                      onChange={(e) => setUserMessageTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>AI Message Background Color</p>
                    <input
                      type="color"
                      value={aiMessageBackgroundColor}
                      onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>AI Message Text Color</p>
                    <input
                      type="color"
                      value={aiMessageTextColor}
                      onChange={(e) => setAiMessageTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Button Background Color</p>
                    <input
                      type="color"
                      value={buttonBackgroundColor}
                      onChange={(e) => setButtonBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Button Hover Background Color</p>
                    <input
                      type="color"
                      value={buttonHoverBackgroundColor}
                      onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Models Background Color</p>
                    <input
                      type="color"
                      value={modelsBackgroundColor}
                      onChange={(e) => setModelsBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>History Background Color</p>
                    <input
                      type="color"
                      value={historyBackgroundColor}
                      onChange={(e) => setHistoryBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Left Panel Background Color</p>
                    <input
                      type="color"
                      value={leftPanelBackgroundColor}
                      onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Conversation Background Color</p>
                    <input
                      type="color"
                      value={conversationBackgroundColor}
                      onChange={(e) => setConversationBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Pop-up Text Color</p>
                    <input
                      type="color"
                      value={popUpTextColor}
                      onChange={(e) => setPopUpTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Border Color</p>
                    <input
                      type="color"
                      value={inputBorderColor}
                      onChange={(e) => setInputBorderColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Font Family</p>
                    <select
                      value={fontFamily}
                      onChange={(e) => setFontFamily(e.target.value)}
                    >
                      <option value="'Poppins', sans-serif">Poppins</option>
                      <option value="'Arial', sans-serif">Arial</option>
                      <option value="'Calibri', sans-serif">Calibri</option>
                      <option value="'Helvetica', sans-serif">Helvetica</option>
                      <option value="'Times New Roman', serif">Times New Roman</option>
                    </select>
                  </div>
                </>
              )}
            </div>
          );
        
      case 'foss':
        return (
          <div className="settings-section">
            <h2>Free and Open Source Software (FOSS) Settings</h2>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={openSourceMode}
                  onChange={() => setOpenSourceMode(!openSourceMode)}
                />
                Enable Open Source Mode
              </label>
            </div>
          </div>
        );

      case 'account':
        return (
          <div className="settings-section">
            <h2>Account Settings</h2>
            <div className="settings-option">
              <label>Change Name</label>
              <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Email</label>
              <input
                type="email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Password</label>
              <input
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </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('foss')}>FOSS</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;