import React from 'react';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import BaseButton from './BaseButton';

const LanguageSwitcher = () => {
  const router = useRouter();
  const { i18n } = useTranslation();

  const changeLanguage = (locale: string) => {
    console.log('changeLanguage', locale);
    i18n.changeLanguage(locale);
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <div className='flex gap-2'>
      <BaseButton
        color={i18n.language === 'en' ? 'info' : 'white'}
        label='EN'
        onClick={() => changeLanguage('en')}
        small
      />
      <BaseButton
        color={i18n.language === 'fr' ? 'info' : 'white'}
        label='FR'
        onClick={() => changeLanguage('fr')}
        small
      />
    </div>
  );
};

export default LanguageSwitcher;