import React from 'react';
import { Menu, Dropdown } from 'antd';
import { useLanguage, useLanguageMenu } from '../../Hooks/useChangeLanguage';
import i18next from 'i18next';
import type { MenuProps } from 'antd';

export default function Translate() {
  const { changeLanguage } = useLanguage();
  const { languageOptions } = useLanguageMenu();  

  const handleLanguageChange = (newLanguage:string) => {
    changeLanguage(newLanguage);
  };

  const items : MenuProps['items']  = languageOptions.map((option:any,index:number) => ({
    key: index,
    label: (
      <div className='MenuPropsItem' onClick={() => handleLanguageChange(option.code)}>
        <img  alt='' src={option.icon} width={20} height={20} /> 
        {option.label}
      </div>
    )
  }));
  
    

  return (
    <div className='Translate'>
      <Dropdown menu={{items}} placement="bottomLeft">
        <button className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          {languageOptions.map((option:any,index:number) => (
            option.code === i18next.language ?
              <React.Fragment key={index}>
                <img alt='' src={option.icon} width={20} height={20} /> {option.label}
              </React.Fragment>
              : null
          ))}
        </button>
      </Dropdown>
    </div>
  );
}
