// ThemeDropdown.tsx
  import React from 'react';
  import { applyTheme, applyCustomTheme } from './theme';

  const ThemeDropdown: React.FC<{
    selectedTheme: string;
    setSelectedTheme: (theme: string) => void;
  }> = ({ selectedTheme, setSelectedTheme }) => {
    const themeOptions = [
      { value: 'IOMARKET', label: 'IOMARKET' },
      { value: 'WHITE', label: 'WHITE' },
      { value: 'BLACK', label: 'BLACK' },
      { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
      { value: 'CUSTOM', label: 'CUSTOM' },
    ];

    return (
      <div className="settings-option">
        <p>Select Theme</p>
        <select
          value={selectedTheme}
          onChange={(e) => {
            const theme = e.target.value;
            if (theme !== 'default') {
              setSelectedTheme(theme);
              localStorage.setItem('selectedTheme', theme); 
            }
          }}
        >
          <option value="default">Select your style...</option>
          {themeOptions.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    );
  };

  export default ThemeDropdown;