Multi-language Support

// Detect browser language
const detectUserLanguage = () => {
  const browserLang = navigator.language.split('-')[0];
  
  // Map to supported languages
  if (browserLang === 'ar') return 'ar';
  if (browserLang === 'fr') return 'fr';
  return 'en'; // Default to English
};

// Use with localStorage for persistence
const getPreferredLanguage = () => {
  const saved = localStorage.getItem('preferredLang');
  if (saved && ['en', 'ar', 'fr'].includes(saved)) {
    return saved;
  }
  return detectUserLanguage();
};

import { useState } from 'react';
import { allCountries } from 'countries-cities-ar';

function MultiLangApp() {
  const [lang, setLang] = useState('en');
  
  const getCountryName = (country) => {
    switch(lang) {
      case 'ar': return country.nameAr;
      case 'fr': return country.nameFr;
      default: return country.name;
    }
  };
  
  return (
    <div>
      {/* Language Switcher */}
      <select 
        value={lang} 
        onChange={(e) => setLang(e.target.value)}
        className="mb-4 px-3 py-2 border rounded"
      >
        <option value="en">English</option>
        <option value="ar">العربية</option>
        <option value="fr">Français</option>
      </select>
      
      {/* Display countries in selected language */}
      <div className="grid gap-2">
        {allCountries.slice(0, 10).map(country => (
          <div key={country.code} className="p-2 border rounded">
            {getCountryName(country)}
          </div>
        ))}
      </div>
    </div>
  );
}