/**
 * 语言切换组件 - 简化版（直接点击切换）
 */

'use client';

import { useState, useEffect } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { localeNames, type Locale, defaultLocale } from '@/lib/i18n';

interface LanguageSwitcherProps {
  variant?: 'icon' | 'text';
  showLabel?: boolean;
}

export function LanguageSwitcher({ variant = 'icon', showLabel = true }: LanguageSwitcherProps) {
  const { locale, changeLocale } = useTranslation();
  const [mounted, setMounted] = useState(false);

  // 避免 hydration mismatch
  useEffect(() => {
    setMounted(true);
  }, []);

  // 直接切换到另一个语言
  const toggleLocale = () => {
    const newLocale: Locale = locale === 'zh' ? 'en' : 'zh';
    changeLocale(newLocale);
  };

  // 在客户端渲染前，使用默认 locale 避免 hydration mismatch
  const displayLocale = mounted ? locale : defaultLocale;

  return (
    <button
      onClick={toggleLocale}
      className="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-150 text-sm"
      style={{
        color: 'var(--text-secondary)',
        background: 'transparent',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = 'var(--bg-tertiary)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = 'transparent';
      }}
      title={`Switch to ${displayLocale === 'zh' ? 'English' : '中文'}`}
    >
      {variant === 'icon' ? (
        <>
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
          </svg>
          {showLabel && <span className="font-medium">{localeNames[displayLocale]}</span>}
        </>
      ) : (
        <span className="font-medium">{localeNames[displayLocale]}</span>
      )}
    </button>
  );
}