import { useTranslation } from 'react-i18next';
import { Window, SegmentedControl } from '@olly/modern-sk';
import { SUPPORTED_LANGUAGES, setLanguage } from '../../i18n';

export function SettingsPage() {
  const { t, i18n } = useTranslation();

  return (
    <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
      <Window title={t('pages.settings')}>
        <div style={{ padding: '0.75rem 0', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <span style={{ fontSize: '0.875rem', color: 'var(--color-text-2)', minWidth: '6rem' }}>
              Language
            </span>
            <SegmentedControl
              value={i18n.language}
              onValueChange={setLanguage}
              items={SUPPORTED_LANGUAGES.map((l) => ({ value: l.code, label: l.label }))}
            />
          </div>
        </div>
      </Window>
    </div>
  );
}