interstellar_ai/app/components/settings/DropDown.tsx

import React from 'react';

interface Option {
  value: string; // The actual value to be used
  label: string; // The label to display for the option
}

interface DropdownSettingProps {
  label: string; // The label to display
  value: string; // The current selected value
  setValue: (newValue: string) => void; // The method to update the state
  options: Option[]; // List of options for the dropdown
}

const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
  };

  return (
    <div className="settings-option">
      <label>{label}</label>
      <select value={value} onChange={handleSelectChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default DropdownSetting;