'use client';
import { useLanguage } from '@/lib/i18n/language-context';
import { Globe } from 'lucide-react';

export function LanguageSwitcher({ variant = 'default' }: { variant?: 'default' | 'mobile' | 'admin' }) {
  const { locale, setLocale } = useLanguage();

  return (
    <div className={`flex items-center gap-1 ${
      variant === 'mobile' ? 'justify-center' : ''
    }`}>
      <Globe className={`w-4 h-4 ${
        variant === 'admin' ? 'text-gray-400' : 'text-gray-500'
      }`} />
      <button
        onClick={() => setLocale('es')}
        className={`px-2 py-1 rounded text-xs font-semibold transition ${
          locale === 'es'
            ? 'bg-red-600 text-white'
            : variant === 'admin'
              ? 'text-gray-400 hover:text-white'
              : 'text-gray-500 hover:text-gray-800'
        }`}
      >
        ES
      </button>
      <button
        onClick={() => setLocale('en')}
        className={`px-2 py-1 rounded text-xs font-semibold transition ${
          locale === 'en'
            ? 'bg-red-600 text-white'
            : variant === 'admin'
              ? 'text-gray-400 hover:text-white'
              : 'text-gray-500 hover:text-gray-800'
        }`}
      >
        EN
      </button>
    </div>
  );
}