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;