// src/components/LanguageSwitcher.js
import React from 'react';
import { useDocusaurusContext } from '@docusaurus/useDocusaurusContext';

export default function LanguageSwitcher() {
  const { i18n } = useDocusaurusContext();

  const locales = [
    { code: 'en', label: 'English' },
    { code: 'zh-Hans', label: '简体中文' }
  ];

  return (
    <div style={{ marginRight: '1rem' }}>
      <select
        value={i18n.currentLocale}
        onChange={(e) => {
          localStorage.setItem('preferredLocale', e.target.value);
          window.location.href = `/${e.target.value}/`;
        }}
        style={{
          padding: '0.5rem 1rem',
          border: '1px solid #ddd',
          borderRadius: '4px',
          backgroundColor: 'white',
          fontSize: '0.9rem',
          cursor: 'pointer',
        }}
      >
        {locales.map((locale) => (
          <option key={locale.code} value={locale.code}>
            {locale.label}
          </option>
        ))}
      </select>
    </div>
  );
}