import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';

// using https://next-intl-docs.vercel.app/docs/getting-started/pages-router
const LanguageSwitcher = () => {
    const t = useTranslations('common');
    const router = useRouter();
    const { locale, locales, asPath } = router;

    return (
        <div>
            {locales.map((lng) => {
                if (lng === locale) return null;
                return (
                    <button key={lng} onClick={() => router.push(asPath, asPath, { locale: lng })}>
                        {t('changeTo')} {t(lng.toUpperCase())}
                    </button>
                );
            })}
        </div>
    );
};

export default LanguageSwitcher;