import { FaGlobe } from 'react-icons/fa';
import { useLanguage } from '../../../providers/language/LanguageContext';
import styles from './LanguageSelector.module.css';

export function LanguageSelector() {
  const { currentLanguage, setLanguage, availableLanguages } = useLanguage();

  // Always show the selector. If the backend has not (yet) returned a list,
  // fall back to a static option for the currently active language so the
  // control is visible even on pre-login screens / before the codes endpoint
  // resolves.
  const optionList = availableLanguages.length > 0
    ? availableLanguages
    : [{ code: currentLanguage, label: currentLanguage.toUpperCase() } as { code: string; label: string }];

  return (
    <div className={styles.wrapper}>
      <FaGlobe className={styles.icon} />
      <select
        className={styles.select}
        value={currentLanguage}
        onChange={(e) => setLanguage(e.target.value as typeof currentLanguage)}
        aria-label="Sprache / Language"
      >
        {optionList.map((lang) => (
          <option key={lang.code} value={lang.code}>
            {lang.label || lang.code.toUpperCase()}
          </option>
        ))}
      </select>
    </div>
  );
}

export default LanguageSelector;