import { GoogleLogin } from '@react-oauth/google';
import { jwtDecode } from 'jwt-decode';
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import { Box, Typography } from '@mui/material';

export default function LoginPage() {
    const { login } = useAuth();
    const navigate = useNavigate();

    return (
        <Box display="flex" flexDirection="column" alignItems="center" mt={10}>
            <Typography variant="h4" gutterBottom>
                Sign in with Google
            </Typography>

            <GoogleLogin
                onSuccess={(credentialResponse) => {
                    const user = jwtDecode(credentialResponse.credential);
                    login(user);
                    navigate('/');
                }}
                onError={() => {
                    console.log('Error signing in');
                }}
            />
        </Box>
    );
}