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

export function LanguageSelector() {
  const { i18n } = useTranslation();

  const toggleLanguage = () => {
    const newLang = i18n.language === 'es' ? 'en' : 'es';
    i18n.changeLanguage(newLang);
    localStorage.setItem('language', newLang);
  };

  const currentLang = i18n.language === 'es' ? 'ES' : 'EN';
  const nextLang = i18n.language === 'es' ? 'EN' : 'ES';

  return (
    <button
      onClick={toggleLanguage}
      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer"
      title={`Switch to ${nextLang}`}
    >
      <Languages className="w-3.5 h-3.5" />
      <span className="font-semibold">{currentLang}</span>
    </button>
  );
}

export default LanguageSelector;