import Flag from 'react-world-flags';
import { useLanguage } from './LanguageContext';
import { InputLabel, MenuItem, Select } from '@mui/material';
import { languages } from '../constants/languages';
import { translations } from '../constants/translations';
import './LanguageSwitcher.css';

const LanguageSwitcher = () => {
  const { targetLanguage, toggleLanguage } = useLanguage();
  const t = translations[targetLanguage];

  return (
    <div>
      <InputLabel id='language-label'>{t.language}</InputLabel>
      <Select
        className='language-selector'
        labelId='language-label'
        value={targetLanguage}
      >
        {languages.map((language, index) => (
          <MenuItem key={index} value={language.code} onClick={() => toggleLanguage(language.code)}>
            <Flag className='flag' code={language.flag} style={{ width: '24px', height: '16px' }} />
            {language.code.toUpperCase()}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
};

export default LanguageSwitcher;
