import React from 'react';
import { useTheme, type Theme } from '../../../contexts/ThemeContext';
import { IS_WORDPRESS } from '../../../constants';
import { Panel, SegmentedControl } from '../../ui';

const THEME_OPTIONS: { value: Theme; label: string }[] = [
  { value: 'light', label: 'Light' },
  { value: 'dark', label: 'Dark' },
  { value: 'system', label: 'System' },
];

const AppearanceSettingsSection: React.FC = () => {
  const { theme, setTheme } = useTheme();

  return (
    <Panel className="space-y-3 p-4">
      <div>
        <h4 className="text-sm font-semibold text-app-text">Theme</h4>
        <p className="mt-0.5 text-xs text-app-muted">
          {IS_WORDPRESS ? 'Saved as a local plugin preference.' : 'Saved to your account.'}
        </p>
      </div>
      <SegmentedControl
        ariaLabel="Theme"
        options={THEME_OPTIONS}
        value={theme}
        onChange={(value) => setTheme(value)}
      />
    </Panel>
  );
};

export default AppearanceSettingsSection;