interstellar_ai/app/components/settings/PrivacySettings.tsx

import React, { useEffect } from 'react';

interface PrivacySettingsProps {
  selectedOption: string; // The currently selected option
  handleRadioChange: (option: string) => void; // Function to handle option changes
  openSourceMode: boolean; // Boolean to check if the mode is open source
}

const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
  
  // Set default option based on openSourceMode if no option is selected
  useEffect(() => {
    if (!selectedOption) {
      handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None');
    }
  }, [selectedOption, handleRadioChange, openSourceMode]);

  // Define your options
  const options = [
    { value: 'Online', label: 'Online' },
    { value: 'Offline', label: 'Offline' },
    { value: 'None', label: 'None' },
    { value: 'Offline (FOSS)', label: 'Offline (FOSS)' },
    { value: 'Online (FOSS)', label: 'Online (FOSS)' },
    { value: 'None (FOSS)', label: 'None (FOSS)' },
  ];

  return (
    <div className="settings-option">
      <p>Select Privacy Mode:</p>
      {options.map((option) => (
        <div key={option.value}>
          <label>
            <input
              type="radio"
              value={option.value}
              checked={selectedOption === option.value}
              onChange={() => handleRadioChange(option.value)}
              disabled={openSourceMode && !option.label.includes('(FOSS)') && selectedOption !== option.value} // Disable non-FOSS options if FOSS is selected
            />
            {option.label}
          </label>
        </div>
      ))}
    </div>
  );
};

export default PrivacySettings;