import { Link } from 'react-router-dom';

// material-ui
import { Box, Grid, Stack, Typography } from '@mui/material';

// project import
import useAuth from 'hooks/useAuth';
import AuthWrapper from 'sections/auth/AuthWrapper';
import AuthLogin from 'sections/auth/auth-forms/AuthLogin';
import dailyLogo from '../../assets/images/nearle/nearleDailyLogo.png';
// ================================|| LOGIN ||================================ //

const Login = () => {
  const { isLoggedIn } = useAuth();
  console.log('isLoggedIn', isLoggedIn);
  return (
    <AuthWrapper>
      <Grid container spacing={3}>
        <Grid item xs={12} display={'flex'} alignItems={'center'} justifyContent={'center'} sx={{}}>
          <Box
            component="img"
            src={dailyLogo}
            alt="dailyLogo"
            sx={{
              maxWidth: { xs: '160px', sm: '200px', md: '260px' },
              width: '100%',
              height: 'auto',
              mt: { xs: 1, sx: -3 }
            }}
          />
        </Grid>
        <Grid item xs={12}>
          <Stack direction="row" justifyContent="space-between" alignItems="baseline">
            <Typography variant="h3">Login</Typography>
            {/* <Typography
              component={Link}
              to={isLoggedIn ? '/auth/register' : '/register'}
              variant="body1"
              sx={{ textDecoration: 'none' }}
              color="primary"
            >
              Don&apos;t have an account?
            </Typography> */}
          </Stack>
        </Grid>
        <Grid item xs={12}>
          <AuthLogin />
        </Grid>
      </Grid>
    </AuthWrapper>
  );
};

export default Login;
