import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { useAuth } from '../../config/authProvider';

export default function Login() {
  const { t } = useTranslation();
  let auth = useAuth();
  let navigate = useNavigate();

  if (!auth.user) {
    return (
      <>
        <p>You are not logged in.</p>{' '}
        <button
          onClick={() => {
            auth.signin('newuser name', () => navigate('/'));
          }}
        >
          Sign in
        </button>
      </>
    );
  }

  return (
    <p>
      <h3>{t('app_title')}</h3>
      This is the proposed module for the login page
      <div>{t('welcome_message')}</div>
      Welcome {auth.user}!{' '}
      <button
        onClick={() => {
          auth.signout(() => navigate('/'));
        }}
      >
        Sign out
      </button>
    </p>
  );
}
