import { useTranslation } from 'react-i18next'
import { Globe } from 'lucide-react'

const languages = [
  { code: 'zh-TW', label: '繁體中文' },
  { code: 'en-US', label: 'English' },
]

export default function LanguageSwitcher() {
  const { i18n } = useTranslation()

  const handleLanguageChange = (langCode: string) => {
    i18n.changeLanguage(langCode)
    localStorage.setItem('tool-ocr-language', langCode)
  }

  const currentLang = languages.find((lang) => lang.code === i18n.language) || languages[0]

  return (
    <div className="relative group">
      <button
        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-sidebar-foreground/70
          hover:text-sidebar-foreground hover:bg-white/5 rounded-lg transition-colors"
      >
        <Globe className="w-5 h-5" />
        <span>{currentLang.label}</span>
      </button>

      {/* Dropdown */}
      <div className="absolute left-0 bottom-full mb-1 py-1 bg-card border border-border rounded-lg shadow-lg
        opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50 min-w-[140px]">
        {languages.map((lang) => (
          <button
            key={lang.code}
            onClick={() => handleLanguageChange(lang.code)}
            className={`w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors
              ${i18n.language === lang.code ? 'text-primary font-medium' : 'text-foreground'}`}
          >
            {lang.label}
          </button>
        ))}
      </div>
    </div>
  )
}