import React from 'react';
import { useTranslation } from 'react-i18next';
import { appBridge } from '@/utils/appBridge';

const LanguageSwitcher: React.FC = () => {
  const { i18n, t } = useTranslation();

  const changeLanguage = async (language: string) => {
    // 웹 언어 변경
    i18n.changeLanguage(language);
    localStorage.setItem('i18nextLng', language);
    
    // 네이티브 환경에서 네이티브 언어도 변경
    if (appBridge.isNativeEnvironment()) {
      try {
        await appBridge.setLanguage(language);
      } catch (error) {
        console.error('Failed to set native language:', error);
      }
    }
  };

  return (
    <div className="flex items-center space-x-2">
      <span className="text-sm text-gray-600">{t('common.language')}</span>
      <select
        value={i18n.language}
        onChange={(e) => changeLanguage(e.target.value)}
        className="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <option value="ko">한국어</option>
        <option value="en">English</option>
      </select>
    </div>
  );
};

export default LanguageSwitcher;