// ThemeDropdown.tsx
import React from 'react';

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' && typeof localStorage !== 'undefined') {
            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;