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' : 'None');
    }
  }, [selectedOption, handleRadioChange, openSourceMode]);

  // Handle option click and allow all options, even in open-source mode
  const handleOptionClick = (option: string) => {
    handleRadioChange(option); // No restrictions on options
  };

  return (
    <>
      {/* AI Mode Radio Options */}
      <div className="settings-option">
        <p>{openSourceMode ? 'Disable Options (FOSS Mode):' : 'Disable Options:'}</p>
        <div className="slider">
          {/* Offline */}
          <div
            className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
            onClick={() => handleOptionClick('Offline')}
          >
            Offline tools{openSourceMode ? ' (FOSS)' : ''}
          </div>

          {/* Online (Available even in FOSS mode) */}
          <div
            className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
            onClick={() => handleOptionClick('Online')} 
          >
            Online tools{openSourceMode ? ' (FOSS)' : ''}
          </div>

          {/* None */}
          <div
            className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
            onClick={() => handleOptionClick('None')}
          >
            None{openSourceMode ? ' (FOSS)' : ''}
          </div>
        </div>
        <br />
      </div>
    </>
  );
};

export default PrivacySettings;