import * as React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslation, Trans, i18n } from 'next-i18next';
import Button from '@mui/material/Button';
import LoginRoundedIcon from '@mui/icons-material/LoginRounded';

import { AUTH0_LOG_IN_PATH } from 'src/constants';

export function HeaderLoginBtn(props: any) {
  const router = useRouter();
  const { t } = useTranslation();
  // const handleToggle = () => {
  //   router.push(AUTH0_LOG_IN_PATH);
  // };
  return (
    <>
      {/* <Button onClick={handleToggle}>Log in (Auth0)</Button> */}
      <Button
        href={AUTH0_LOG_IN_PATH}
        sx={{
          textTransform: 'none',
          color: 'custom.k2',
        }}
      >
        {t('header.login')}
      </Button>
    </>
  );
}

export function HeroLoginButton() {
  const { t } = useTranslation();

  return (
    <>
      <Button
        href={AUTH0_LOG_IN_PATH}
        sx={{
          textTransform: 'none',
          // color: 'custom.k2',
        }}
        variant="contained"
        startIcon={<LoginRoundedIcon fontSize="inherit" />}
      >
        {t('header.login')}
      </Button>
    </>
  );
}