import React from 'react';
import { useTranslation } from 'react-i18next';

interface LanguageSwitchProps {
  isCollapsed?: boolean;
}

const LanguageSwitch: React.FC<LanguageSwitchProps> = ({ isCollapsed = false }) => {
  const { i18n } = useTranslation();
  const isEnglish = i18n.language === 'en';

  const switchTo = (lang: string) => {
    if (i18n.language !== lang) {
      i18n.changeLanguage(lang);
    }
  };

  if (isCollapsed) {
    return (
      <button
        className="lang-toggle-collapsed"
        onClick={() => switchTo(isEnglish ? 'ko' : 'en')}
        title={isEnglish ? '한국어로 전환' : 'Switch to English'}
      >
        {isEnglish ? 'EN' : 'KO'}
      </button>
    );
  }

  return (
    <div className="lang-toggle">
      <button
        className={`lang-toggle-option ${!isEnglish ? 'active' : ''}`}
        onClick={() => switchTo('ko')}
      >
        KO
      </button>
      <button
        className={`lang-toggle-option ${isEnglish ? 'active' : ''}`}
        onClick={() => switchTo('en')}
      >
        EN
      </button>
      <div className={`lang-toggle-slider ${isEnglish ? 'right' : 'left'}`} />
    </div>
  );
};

export default LanguageSwitch;