import React from 'react';
import type { Language } from '../../types/i18n';

interface LanguageSwitcherProps {
  currentLanguage: Language;
  onLanguageChange: (language: Language) => void;
  availableLanguages: Language[];
}

export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
  currentLanguage,
  onLanguageChange,
  availableLanguages
}) => {
  const languageNames: Record<Language, string> = {
    fr: '🇫🇷 Français',
    en: '🇬🇧 English',
    //es: '🇪🇸 Español',
    //de: '🇩🇪 Deutsch'
  };

  return (
    <div className="relative inline-block">
      <select
        value={currentLanguage}
        onChange={(e) => onLanguageChange(e.target.value as Language)}
        className="bg-banquise-blue-dark/20 border border-banquise-blue-lightest/30 text-banquise-gray rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-banquise-blue-light"
      >
        {availableLanguages.map((lang) => (
          <option key={lang} value={lang} className="bg-banquise-blue-dark text-banquise-gray">
            {languageNames[lang]}
          </option>
        ))}
      </select>
    </div>
  );
};